[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 { }
g'night...
--
Read the evolt.org case study
Usability: The Site Speaks for Itself
http://amazon.com/exec/obidos/ASIN/1904151035/evoltorg02-20
ISBN: 1904151035
More information about the thelist
mailing list