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.
✖ Clear

🕵 Search Results

🔎 Searching...