[thelist] [CSS] Specificity Issues

aardvark roselli at earthlink.net
Mon Oct 21 17:57:05 CDT 2002

> From: "Dru and Cindy Sellers" <dru at zetachi.org>
> I have a css selector question for those in the know. First, is there
> any difference between " div.body div {} " and " div.body > div {} "?

the first is a generic descendent selector... *any* <div> within a
<div class="body"> will be affected, even if it's nested a million
levels deep....

the second is a child selector... *only* a <div> immediately within
<div class="body"> will be selected...

does that make sense?  do you need code samples? are you finding that
some browsers don't do child selectors very well?  am i the only one
who's craving pasta?

> Second, I have a simple page
> ======
> <html>
>   <head>
>     <style>
>  div {margin-left: 20px; border-left: 1px solid #000;}
>  div  div {margin-left: 20px; border-left: 1px solid #000;}
>     </style>
>   </head>
>   <body>
>  <div>111
>           <div>222
>             <div>333</div>
>           </div>
>         </div>
>   </body>
> </html>
> =====
> How can I spwcify only one child level deep with css? I want both the
> "111" and the "222" to have a margin and the "333" to not have a
> margin. Any ideas?

with the child selector you have above... disregarding browser
support, and using what you have, perhaps this would work (i'm
writing this with a fever, so be sure to test it on your own):

body > div > div { }


Read the evolt.org case study
Usability: The Site Speaks for Itself
ISBN: 1904151035

More information about the thelist mailing list