Before proceeding to CSS attribute selector, I’ll advice you to read CSS tutorial for beginners, CSS Properties and Values and CSS Selectors first. If you have already read, then we’re good to proceed.

CSS attribute selector Introduction

As we all know that HTML tags have some related attributes or properties associated with them. CSS provides targeting elements according to their attributes as well. This can be really helpful sometimes. Because when using CSS Element Selector,  it specifies style for all the selected elements found on the webpage. But by using CSS attribute selector,  we can choose which specific Elements we want to style according to their attributes.

For Example : 

we can see the result :

See the Pen CSS [attribute] by The SuperKat (@thesuperkat) on CodePen.

So as we see in the example above CSS attribute selector targets all the specified elements which share the same attribute in the webpage. The tag with attribute “href=http://thesuperkat.com/” is targeted in the CSS to have a yellow background color. This is a great help when targeting selective elements.

Another nice example

Not just that, we can do a lot of cool stuff with css attribute selector. We’ll be doing in our more complex example below:

  
    

      paragraph with 80 width
    
 
    

      paragraph with 70 width 
      The SueprKat
    
    

      div with 80 width
      

        div with 70 width
      
    
  

and

*[href="http://thesuperkat.com/"]{
  color:green;
}

*[width="80"]{
  padding:15px;
  background:yellow;
}

*[width="70"]{
  padding:15px;
  background:black;color:#fff;
}

and our supercool output:

See the Pen XKwajb by The SuperKat (@thesuperkat) on CodePen.

Please Note in the above example we’ve used the css * (asterisk) selector  which targets every element in the webpage. But with the “*”  we’ve also used our css attribute selector  which tells css to look for all elements having a specific attribute and value. It doesn’t matter what it is, a