By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
459,299 Members | 1,347 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 459,299 IT Pros & Developers. It's quick & easy.

Cascading Styles

P: n/a
Hello,

I have the following:

<div class="Body">
<div class="Content">
<h2>First Header</h2>
<div class="Post">
<h2>Second Header</h2>
</div>
</div>
</div>

I have:

div.Body div.Content h2 {font-size: 2em;}

div.Post h2 {font-size: 1em;}

The first header is with the right size but the second not ...
shouldn't this work?

What am I doing wrong? Should I make this differently?

Thanks,
Miguel

Sep 23 '08 #1
Share this Question
Share on Google+
2 Replies


P: n/a
shapper wrote:
Hello,

I have the following:

<div class="Body">
<div class="Content">
<h2>First Header</h2>
<div class="Post">
<h2>Second Header</h2>
</div>
</div>
</div>

I have:

div.Body div.Content h2 {font-size: 2em;}

div.Post h2 {font-size: 1em;}

The first header is with the right size but the second not ...
shouldn't this work?
I take it you want the first h2 to be 2em and the second to be 1em.

The answer is that the first one matches both: what it's saying is
"match all h2 elements that are descendents of div's of class Content
that are descendents of div's of class Body." The second one also
matches the latter one.

The spec says that the first one matches because it has more classes
than the second ones.

The cascade in short:
1. Prefer style="" on an element over anything else.
2. Else, prefer the one with more id references.
3. Else, prefer the one with more other attribute references.
4. Else, prefer the one with more elements.
5. Else, prefer the last one written.

--
Beware of bugs in the above code; I have only proved it correct, not
tried it. -- Donald E. Knuth
Sep 23 '08 #2

P: n/a
In article
<54**********************************@x41g2000hsb. googlegroups.com>,
shapper <md*****@gmail.comwrote:
<div class="Body">
<div class="Content">
<h2>First Header</h2>
<div class="Post">
<h2>Second Header</h2>
</div>
</div>
</div>

I have:

div.Body div.Content h2 {font-size: 2em;}

div.Post h2 {font-size: 1em;}

The first header is with the right size but the second not ...
shouldn't this work?
Try

div.Content h2 {font-size: 2em;}
div.Content div.Post h2 {font-size: 1em;}

--
dorayme
Sep 23 '08 #3

This discussion thread is closed

Replies have been disabled for this discussion.