Why does #box2 a overrides #box a and when I put .box2 a it doesn't override?
#box a { font-size:25px; }
#box2 a { font-size:55px; }
<div id="box">
<a href="">link</a>
<div id="box2"><a href="">link</a></div>
</div>
Asked
Active
Viewed 85 times
0
Michael Petrotta
- 59,888
- 27
- 145
- 179
cssnb2329
- 41
- 1
-
'.' refers to a class name, '#' refers to an id. – Will Sep 06 '11 at 01:53
-
If you change the css to `.box2` and set the div to `class="box2"`, it will use 25px instead of 55px. That's what he is saying. – Trevor Sep 06 '11 at 01:55
-
http://www.w3.org/TR/CSS2/selector.html – Jared Farrish Sep 06 '11 at 01:56
2 Answers
1
CSS rules always occur in order of appearance, so if two apply to a specific element, the one appearing last would have precedence.
Also, as mentioned, if you use .box2 that would apply to an element with the class name box2, whereas #box2 would apply to an element with an id of box2
Understanding CSS Style Precedence
Another Stack Overflow question relating to CSS classes and ids, and precedence
Community
- 1
- 1
Rion Williams
- 74,820
- 37
- 200
- 327
0
Because you may did not add a class="box2". The . refers to classes. # is for id.
EnexoOnoma
- 8,454
- 18
- 94
- 179