Attribute selectors

Attribute selectors are used to style elements that have a particular attribute or values. That means it target the element based on attribute or values. The use of css attribute selectors is fairly limited because they have been supported only in the latest versions of browsers. Following are some of commonly used attribute selectors and sample codes.

Presence of an attribute

This one check whether the attribute is specified in the element, doesn`t matter what the value given to the attribute is:

p[class] {color: #FF0066;}

In the above css code any < p > element with attribute “class” to change the color to #FF0066.

<html>
  <head>
    <style type="text/css">
      .textcolor {
      color: #FF0066;
    }
    p[class] {
      font-size:20pt;
    }
    </style>
  </head>
  <body>
    <p> Simple attribute selector sample</p>
    <p class="textcolor"> This paragraph has attribute class</p>
    <p> Next paragraph</p>
  </body>
</html>

In the above css code the attribute selector find attribute name “class” exist in p element and if exist it change the font size.

Output:

The value of an attribute

You can style the elements with its attribute values.

a[href="http://www.corelangs.com/default.html"] { font-size:20pt; }

In the above code the style changes according to its attribute value. If any href attribute with its value “http://www.corelangs.com/default.html” will change the font size.

<html>
  <head>
    <style type="text/css">
      a[href="http://www.corelangs.com/default.html"] { font-size:20pt; }
    </style>
  </head>
  <body>
    <a href="http://www.corelangs.com/about.html">About</a> <br>
    <a href="http://www.corelangs.com/default.html">Corelangs.Com</a> <br>
    <a href="http://www.corelangs.com/sitemap.html">Sitemap</a>
  </body>
</html>

output

Style based on Partial Attribute Values

Taking the advantage of attribute selectors , you can style an element by based on whether a particular word contain anywhere inside attribute value, appears at the beginning of an attribute`s value, at the end of an attribute`s value or contains as a substring in the attribute value.

Word Matching

If any attribute that have a space separated list of words , you can style that element based on the presence of any one of those words.

attribute~="value"

Source

<html>
<head>
  <style type="text/css">
    .bigfont{
    font-size:50pt;
  }
  .myredclass{
    color: red;
  }
  .blueclass{
    color: blue;
  }
  .green{
    color: green;
  }
  h1[class~="bigfont"] { font-style: italic; }
  </style>
</head>
<body>
  <h1 class="myredclass">Red</h1>
  <h1 class="blueclass bigfont" >Blue</h1>
  <h1 class="green" >Green</h1>
</body>
</html>

output

Contains substring

You can style an element by select its substring from its attribute vale.

attribute*="value"

Source Code

<html>
<head>
  <style type="text/css">
  .myredclass{
    color: red;
  }
  .blueclass{
    color: blue;
  }
  .green{
    color: green;
  }
  h1[class*="green"] { font-style: italic; }
  </style>
</head>
<body>
  <h1 class="myredclass">Red</h1>
  <h1 class="blueclass" >Blue</h1>
  <h1 class="greenclass" >Green</h1>
</body>
</html>

output

Start With

Check the attribute value is start with given word.

Source Code

output

End With

Check the attribute value is end with given word.

attribute$="value"

Source Code

<html>
<head>
  <style type="text/css">
    .myredclass{
      color: red;
    }
    .blueclass{
      color: blue;
    }
    .green{
      color: green;
    }
    h1[class$="class"] { font-style: italic; }
  </style>
</head>
<body>
  <h1 class="myredclass">Red</h1>
  <h1 class="blueclass" >Blue</h1>
  <h1 class="green" >Green</h1>
</body>
</html>

output

In the above image, you can see Red and Blue are in Italics style because these two classes end with the word “class”.