Double Vision – Give the Browsers CSS They Can Digest - The child selector

(Page 5 of 8 )

It is pretty hard finding useful examples for the child selector, but basically it can save some hassle, for example in the following HTML:

<div>

<p>Content 1</p>

<ul>

    <li><p>Content 2</p></li>

    <li><p>Content 3</p></li>

</ul>

<p>Content 2</p>

</div>

 

We want all the P elements outside the list to have a background, but the ones inside the list to have none.

 

What we could use is: 

div p{background:#036;}

div li p{background:transparent;}

which can be replaced on real CSS2 browsers with:

 

div>p{background:#036;}

 

Adjacent sibling selectors

These selectors allow us to match exactly the next element in the node tree. For example, they allow us to only apply a margin to a paragraph when it is not following another paragraph. If it does follow another paragraph, we won’t apply a margin, but indent the text – much like you do in books: 

p {margin:.5em 0 0 0;}

p+p {margin:0;text-indent:1em;} 

Next: Enhancing with the child selector >>
 

More Style Sheets Articles
More By Chris Heilmann

Comments On: Double Vision – Give the Browsers CSS They Can Digest

· Some browsers understand both imports but don't display CSS2 properly - so this will...    · which ones? The only one that comes to mind is Opera < 7.   >>> Post your comment now!