Attribute Selectors
Attribute selectors target elements based on their attributes or attribute values. They are particularly useful for form controls, data attributes, links, and state represented through attributes.
Attribute Selector Matching
Attribute Selector Examples
input[type="email"] {
border-color: steelblue;
}
button[disabled] {
opacity: 0.5;
}
[data-theme="dark"] {
color-scheme: dark;
}
[href^="https://"] {
text-decoration: underline;
}💡 CSS supports exact matching and operators such as starts-with
^=, ends-with $=, and contains *=.Key Takeaways
- Attribute selectors can target both presence and values.
- They are useful when styling semantic states represented through attributes.
Knowledge Check
What does `[disabled]` select?