Mar 12

A lesson that every developer must know about multiple class cascade in CSS

The text above was taken from http://css-discuss.incutio.com

Please read the red text below at least 10 times… 🙂

“What’s the expected behavior when an element has multiple classes which redefine properties? Here’s an example:

<style type="text/css">  
  .headline { border: 3px solid red } 
  .newsitem { border: 2px solid red }  
  .blurb    { border: 1px solid red }
<h1 class="headline newsitem blurb">French Noblewoman Advocates Increased Cake Consumption Among Peasants</h1>

Will the border of the H1 element be 3, 2, or 1 pixel wide?

To answer this question you need to understand how Selector Specificity works in CSS. In this case the (rough) answer is the “last highest-weighted rule wins”, so the border will be 1px. Note that it’s the order of the rules in the stylesheet that controls which takes precedence; the order of the class names in the class attribute is irrelevant.”