Attributes based selectors are used when there is a need to apply styles to elements that share specific attributes.

There are four ways to match an attribute within an attribute selector. These are:

  • [att] -> matches given attribute regardless of its value;
  • [att=val] -> matches given attribute whose value is equal to the one in the selector;
  • [att~=val] -> matches given attribute whose value is a white space separated list of words, one of which is equal to the value in the selector;
  • [att|=val] -> matches given attribute whose value either begins with the value in the selector or begins with the same value followed by "-"; this type of a selector is primarily intended for the attributes used in language declarations such as hreflang.

Example

CSS attribute selectors without class and id attributes example:

 

›› go to examples ››