css - Attribute Selectors
CSS attribute selectors allow you to target HTML elements based on the presence, value, or part of an attribute. These selectors are incredibly powerful when it comes to styling elements dynamically without relying on classes or IDs. This can be especially useful for styling forms, links, and any elements with custom data attributes.
In this guide, we'll explore different types of CSS attribute selectors, their syntax, and practical examples.
What Are CSS Attribute Selectors?
CSS attribute selectors are used to select elements that have specific attributes or attribute values. They are denoted using square brackets [] in your CSS rules.
Basic Syntax
[element[attribute]]
[element[attribute="value"]]
[element[attribute~="value"]]
[element[attribute^="value"]]
[element[attribute$="value"]]
[element[attribute*="value"]]
[element[attribute|="value"]]
Types of CSS Attribute Selectors
1. [Attribute] Selector
Selects elements that have a specified attribute, regardless of its value.
Example
<input type="text" placeholder="Name">
<input type="password" placeholder="Password">
<input type="email" placeholder="Email">
css
Copy code
/* Selects all inputs that have a placeholder attribute */
input[placeholder] {
background-color: #f0f8ff;
}
Result:
All input fields with a placeholder attribute will have a light blue background.
2. [Attribute="value"] Selector
Selects elements with an attribute that exactly matches the specified value.
Example
<a href="https://example.com" target="_blank">External Link</a>
<a href="https://mysite.com" target="_self">Internal Link</a>
css
Copy code
/* Selects links that open in a new tab */
a[target="_blank"] {
color: red;
}
Result:
The external link will have a red text color.
3. [Attribute~="value"] Selector
Selects elements whose attribute value contains a specified word (space-separated).
Example
<div class="box small green"></div>
<div class="box large green"></div>
CSS code:
/* Selects elements that have "small" as a class */
div[class~="small"] {
border: 2px solid blue;
}
Result:
Only the first <div> will have a blue border.
4. [Attribute^="value"] Selector
Selects elements whose attribute value starts with a specified value.
Example
<a href="https://google.com">Google</a>
<a href="http://example.com">Example</a>
CSS code:
/* Selects all links with hrefs starting with "https" */
a[href^="https"] {
font-weight: bold;
}
Result:
The Google link will appear in bold.
5. [Attribute$="value"] Selector
Selects elements whose attribute value ends with a specified value.
Example
<img src="photo.jpg" alt="Photo">
<img src="image.png" alt="Image">
CSS code:
/* Selects all images with .jpg extension */
img[src$=".jpg"] {
border: 5px solid green;
}
Result:
The .jpg image will have a green border.
6. [Attribute*="value"] Selector
Selects elements whose attribute value contains the specified substring.
Example
<p data-info="customer-details">Customer Info</p>
<p data-info="order-details">Order Info</p>
CSS code:
/* Selects elements that have "details" in data-info attribute */
p[data-info*="details"] {
background-color: yellow;
}
Result:
Both paragraphs will have a yellow background.
7. [Attribute|="value"] Selector
Selects elements whose attribute value is exactly equal to a specified value or starts with that value followed by a hyphen.
Example
<div lang="en-US">English (US)</div>
<div lang="en-GB">English (UK)</div>
<div lang="fr">French</div>
CSS code:
/* Selects elements with lang attribute starting with "en" */
div[lang|="en"] {
color: blue;
}
Result:
Both English divs will have blue text color.
Practical Use Cases for CSS Attribute Selectors
Styling Disabled Form Inputs
CSS code:
input[disabled] {
background-color: #e9ecef;
cursor: not-allowed;
}
Targeting Empty Links
CSS code:
a[href=""] {
color: gray;
text-decoration: line-through;
}
Styling External Links
a[href^="http"]::after {
content: "
