Menu
Advanced Selectors
CSS Attr Selectors
Select by attribute existence or value.
1Attribute Matching
Target elements with specific attributes.
Example Code
css
a[target="_blank"] {
color: red;
}
input[type="text"] {
background: #f0f0f0;
}2Understand it in a real interface
Attribute selectors match elements by an attribute’s presence or value. They can style external link hints, input types, or states represented in markup. Be deliberate about exact matches and partial matches, which may select more elements than expected.
3Try it yourself
Style email inputs using their type attribute, then add another input type and confirm that it remains unchanged. Try a data-state value on a panel and switch the value in the HTML. Inspect whether the selector still describes a useful state after the markup changes.
Finished reading?
Mark this topic as complete to track progress.