⚡IntermediateAdvanced Selectors
CSS Attribute Selectors
Target elements by their HTML attributes and attribute values using [attr], [attr="val"], [attr^=], [attr$=], and [attr*=].
Overview
CSS attribute selectors let you style elements based on the presence or value of HTML attributes without adding extra classes to your markup. This is especially powerful for styling form inputs, links, and any element where the attribute carries meaning.
The six attribute selector variants:
| Selector | Meaning |
|---|---|
| `[attr]` | Element has the attribute (any value) |
| `[attr="val"]` | Exact match |
| `[attr^="val"]` | Value starts with "val" |
| `[attr$="val"]` | Value ends with "val" |
| `[attr*="val"]` | Value contains "val" anywhere |
| `[attr~="val"]` | Value is a space-separated list that includes "val" |
You can combine them with type selectors: `input[type="email"]`, `a[href^="https"]`.
Key Points
- •[disabled] selects any element that has the disabled attribute
- •[type="checkbox"] selects only checkboxes among all inputs
- •a[href^="https"] targets external HTTPS links
- •a[href$=".pdf"] targets links ending in .pdf
- •a[href*="github"] targets links containing "github" anywhere in the href
- •[class~="highlight"] matches elements where the class list includes "highlight"
- •Add i flag for case-insensitive matching: [type="TEXT" i]
Examples
Style external links with an icon
/* Links starting with http or https are external */
a[href^="http"] {
color: #6366f1;
text-decoration: none;
}
/* Add an external link icon after external links */
a[href^="http"]::after {
content: " ↗";
font-size: 0.75em;
opacity: 0.7;
}This works without any JavaScript or extra classes the attribute carries the information.
Style form inputs by type
/* Style all text-like inputs consistently */
input[type="text"],
input[type="email"],
input[type="password"] {
border: 2px solid #e2e8f0;
border-radius: 8px;
padding: 8px 12px;
}
/* Required fields get a different border */
input[required] {
border-color: #fbbf24;
}
/* Disabled elements */
input[disabled],
button[disabled] {
opacity: 0.5;
cursor: not-allowed;
}Target file types in links
/* PDF download links */
a[href$=".pdf"]::before {
content: "📄 ";
}
/* Image links */
a[href$=".png"],
a[href$=".jpg"],
a[href$=".webp"] {
border: 1px solid #e5e7eb;
border-radius: 4px;
padding: 2px 6px;
}Common Mistakes
- Forgetting that attribute values are case-sensitive by default use [attr="Value" i] for case-insensitive matching
- Using [href*="http"] instead of [href^="http"] *="http" would also match hrefs containing "http" in the middle
- Confusing [class="btn"] (must be exactly "btn") with using a class selector .btn (matches any element with "btn" in class list)
Note
Attribute selectors have the same specificity as class selectors (0,1,0). This means [type="text"] is as specific as .text-input plan your cascade accordingly.
Exercises
Write CSS to style the HTML scaffold. The preview updates live — when it looks right, mark as done.
Loading editor…
Completed: 0 / 5 exercises
Knowledge Check
Question 1 of 4