These attribute selectors allows selecting matching strings in the value of an attribute.
These are the CSS2 selectors but there are also new attribute selectors in CSS3.
# Occurs
This attribute selector matches any element who has such a given attribute.
# Syntax
[attribute] {
/* declarations */
}
# Example
[title] {
border-bottom: 1px solid black;
}
All elements which have an title attribute will selected and get a black bottom border.
# Browser support
# Exactly
This attribute selector matches any element which attribute value is exactly the same as specified via CSS.
# Syntax
[attribute="value"] {
/* declarations */
}
# Example
[lang="en"] {
border-bottom: 1px solid black;
}
All elements which have an lang attribute to en will get a black bottom border.
# Browser support
# Whitespace
This attribute selector matches elements which whitespace-separated attribute values are the same as specified.
# Syntax
[attribute~="value"] {
/* declarations */
}
# Example
[class~="alert"] {
background-color: red;
}
All elements which have an class attribute with an alert class (separated by whitespace(s)) will get a red background.
# Browser support
# Hypen
This attribute selector selects all elements which hyphen-separated attribute values are the same.
# Syntax
[attribute|="value"] {
/* declarations */
}
# Example
[lang|="en"] {
border: 1px solid blue;
}
All elements that have an English - en - attribute which is or could be separated by hypens will get a blue border.