Cascading Styles

[shapper]

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

[Joshua Cranmer]

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

[dorayme]

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