Table of Contents
Selecting elements based on their attributes and attribute values is very powerful.
This checks for the presence of an attribute:
a[title] {
background-color: yellow;
}
And this checks for an attribute with a specific value:
a[target="_blank"] {
background-color: hotpink;
}
But wait, there's more!
You can do a whole lot more:
- [attribute~="foo"] : Checks if value contains the word foo.
- [attribute|="foo"] : Checks if value starts with the word foo.
- [attribute^="foo"] : Checks if value starts with the letters foo.
- [attribute$="foo"] : Checks if value ends with foo.
- [attribute*="foo"] : Checks if value contains the letters foo.
