CSS Attribute Selector

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.