CSS Attribute Selectors allow you to apply styles based on attributes in HTML elements. You can style elements with:
- A specific attribute
- A specific value
- Values that start with, end with, or contain certain text
1. Select elements with a specific attribute
Matches elements that contain the given attribute (any value).
Example: [required] selects inputs with the "required" attribute.
style.css
input[required] {
border: 2px solid red;
}index.html
<input type="text" required />
<input type="text" />2. Select elements with a specific attribute and value
Matches elements where the attribute is exactly equal to the value.
Example: [type="text"] selects only input elements of type text.
style.css
input[type="text"] {
background-color: lightyellow;
}index.html
<input type="text" />
<input type="password" />3. Match value that starts with specific text (^)
Matches attribute values that start with a certain string.
Example: [href^="https://"] targets links starting with https.
style.css
a[href^="https://"] {
color: green;
}index.html
<a href="https://google.com">Secure</a>
<a href="http://example.com">Not Secure</a>4. Match value that ends with specific text ($)
Matches attribute values that end with specific text.
Example: [src$=".png"] selects images ending in ".png".
style.css
img[src$=".png"] {
border: 3px solid blue;
}index.html
<img src="photo.png" />
<img src="image.jpg" />5. Match value that contains specific text (*)
Matches attribute values that contain specific string anywhere.
Example: [class*="btn"] selects any class with "btn" in it.
style.css
div[class*="btn"] {
padding: 10px;
background-color: lightblue;
}index.html
<div class="btn-primary">Button</div>
<div class="container">Not a button</div>6. More examples with class and id attributes
Attribute selectors also work with class and id. Use ~= to match whole words in multi-class attributes.
style.css
div[class~="inner"] {
background: gray;
}
.txt {
color: white;
}index.html
<div class="box inner txt">Content</div>
<div class="box outer">Other</div>Practical example with anchor tags
Example of using multiple attribute selectors with anchor (<a>) elements.
style.css
a[title] {
color: blanchedalmond;
}
a[title="Link-1"] {
color: orange;
}
a[href] {
color: aqua;
}
a[href="test.png"] {
color: aqua;
}
a[href^="test"] {
color: blueviolet;
}
a[href$="#"] {
color: red;
}index.html
<a title="Link-1" href="test.png">Image Link</a>
<a href="test-file">Starts with "test"</a>
<a href="index.html#">Anchor Ending</a>🌐 What Are Attribute Selectors?
Attribute selectors allow you to target HTML elements based on the presence, value, or pattern of their attributes. They provide fine-grained control and make your CSS more semantic and flexible.
Note
📦 Types of Attribute Selectors
| Selector | Description | Example |
|---|---|---|
| [attr] | Attribute exists (no value check) | [disabled] |
| [attr="value"] | Exact value match | [type="email"] |
| [attr~="value"] | Value is in a whitespace-separated list | [class~="active"] |
| [attr|="value"] | Value equals or starts with value + hyphen | [lang|="en"] |
| [attr^="value"] | Value starts with | [href^="https"] |
| [attr$="value"] | Value ends with | [src$=".png"] |
| [attr*="value"] | Value contains substring | [data-id*="user"] |
🔹 1. Existence Selector — [attr]
Selects elements that simply *have* the attribute (value doesn’t matter).
Existence Selector
[disabled] {
opacity: 0.5;
cursor: not-allowed;
}Applies to any element with a disabled attribute.
🔹 2. Exact Match — [attr="value"]
Matches elements whose attribute value is exactly equal to the provided value.
Exact Match
input[type="password"] {
border-color: red;
}🔹 3. Whitespace Match — [attr~="value"]
Matches when the attribute contains a whitespace-separated list of words.
Whitespace Match
[class~="highlight"] {
background: yellow;
}Note
🔹 4. Hyphen Match — [attr|="value"]
Matches exact value or value followed by a hyphen. Common for language attributes.
Hyphen Match
p[lang|="en"] {
font-style: italic;
}🔹 5. Starts With — [attr^="value"]
Selects elements whose attribute starts with a given value.
Starts With
a[href^="https"] {
color: green;
}Styles all secure links (HTTPS).
🔹 6. Ends With — [attr$="value"]
Selects elements whose attribute ends with a specific value.
Ends With
img[src$=".svg"] {
background: #f0f0f0;
}🔹 7. Contains — [attr*="value"]
Matches when the attribute contains a substring anywhere inside.
Contains Match
div[data-user*="admin"] {
border: 2px solid red;
}Useful for advanced UI states using data-* attributes.
🧪 Practical Examples
✔ Styling External Links
External Link Styling
a[href^="http"]:not([href*="yourdomain.com"]) {
color: orange;
}✔ Icon Button (ARIA attribute)
ARIA-based styling
button[aria-expanded="true"] {
background: #333;
color: #fff;
}✔ Responsive form styling
Form Attribute Styling
input[required] {
border-left: 4px solid red;
}✔ Target file types
File Type Selector
a[href$=".pdf"]::after {
content: "📄";
}🧠 Combining Attribute Selectors
Multiple Attribute Rules
input[type="text"][data-valid="false"] {
border-color: red;
}Both conditions must match.
⚠️ Common Mistakes
- ❌ Expecting [attr] to match only specific values
- ❌ Using attribute selectors for everything instead of classes
- ❌ Forgetting that attribute selectors have the same specificity as classes
- ❌ Overusing expensive substring matches like [attr*="value"]
Note
🔥 Summary
Attribute selectors give you powerful, flexible ways to target elements based on their attributes. They are perfect for form styling, dynamic UI states, ARIA enhancements, and semantic selectors without cluttering your HTML with extra classes.
Learn more →MDN Docs 📘