Forum Moderators: not2easy

Message Too Old, No Replies

ID stronger than Class?

         

uncovered

9:45 pm on Dec 11, 2008 (gmt 0)

10+ Year Member



hi,
Please tell me from this code, why is this orange and not red?
thanks!

<html><head><style>
#myid p {color: orange;}
.myclass p {color:red;}
</style></head><body>

<div id="myid">
<div class="myclass"><p>Why is this orange and not red?</p></div>
</div>

</body></html>

[edited by: swa66 at 10:26 pm (utc) on Dec. 11, 2008]
[edit reason] unintended smiley removal [/edit]

lavazza

10:18 pm on Dec 11, 2008 (gmt 0)

10+ Year Member



I think it's (simply?) because of the specificity [webmasterworld.com] (a term I have trouble spelling, let alone understanding!)

See what happens if you try

<html><head><style type="text/css">
#myid p {color: orange;}
.myclass p {color:red ! important;}
</style></head><body>

OR

<html><head><style type="text/css">
#myid p {color: orange;}
#myid.myclass p {color:red;}
</style></head><body>

ETA: Welcome to the forum!

[edited by: swa66 at 10:25 pm (utc) on Dec. 11, 2008]
[edit reason] unintended smiley removal [/edit]

Xapti

4:17 am on Dec 12, 2008 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



ids are more specific than classes, since you should only have 1 ID per element. Classes can be shared across multiple elements, so they are less specific.
CSS prioritizes styles for the most specific parameters.
the priority can be overridden with !important; but it's preferrably not used, since it's designed for the end-user to use for their own style overrides, and when the website uses them, there could be conflict I think?