HI all,

CSS attribute selectors is a great way to manipulate your style may be you have used this before but it really awesome and I am sure using it you can make more easy your style.

Lets understand this with below example -

I have a simple list with four list item

<ul>
  <li>This list item has no class</li>
  <li class="red">This is a red list item</li>
  <li class="red dark example">This is a list item with 2 classes</li>
  <li class="text-red">This is a list item with red text</li>
</ul>  

So now if I use this method,

li[class] {
  background-color: blue;
}

It will applied only which have any class, It means it will work with all, apart of first element because here the first element do not have any class.

li[class="red"] { 
  background-color: green;
}

It will be applied on element which have exact same class name, which we will define in this method and in this example above and only second li will have green background .

li[class~="example"] {
  background: pink;
}

Here if any class have name example this will be applied there but class name should be separate.

li[class|="text"] {
  background-color: yellow;
}

This method is really very useful, for example if you have a class name text-red ( which class name have hyphen -) and use upper method then yellow background will apply will all text named classes.