Search code examples
htmlcsscss-specificity

Css ignoring class rules

Very basic question but it seems my CSS is ignoring my class rules and still applying padding to the left and to the right:

http://jsfiddle.net/VabWL/11/

This makes it drop off the end. Can anyone see what I am doing wrong here please?

#num {float: left; background: pink; width: 16.8%; text-align: center; margin: 2%;}
.first {margin-left: 0px; background: blue; height: 50px;}
.last {margin-right: 0px;}

<div id="num" class="first">0</div>
<div id="num">1</div>
<div id="num">4</div>
<div id="num">6</div>
<div id="num" class="last">9</div>
Solution

  • An id selector is more specific than a class selector so will be applied last in the cascade.

    ids have to be unique, so your HTML is invalid anyway. Use classes throughout instead.

    <div class="num first">0</div>
<div class="num">1</div>
<div class="num">4</div>
<div class="num">6</div>
<div class="num last">9</div>