...

View Full Version : CSS: classes after each other



qwertyuiop
02-10-2004, 02:05 AM
What does it mean when you have something like this:

.classone .classtwo {background: green;}

What about this:

.classone #idone .classtwo {color: blue;}

freak
02-10-2004, 02:33 AM
It's just a simple descendant selector.



.classone .classtwo


Selects any element with a class attribute that contains the word classtwo that is a descendant of any element with a class attribute that contains the word classone.

And,


.classone #idone .classtwo


Selects any element with a class attribute that contains the word classtwo that is a descendant of any element with an id attribute that equals idone that is a descendant of any element with a class attribute that contains the word classone.

// freak

qwertyuiop
02-10-2004, 02:45 AM
So, the first example in HTML would be:

...<p class="classone">stuff<b class="classtwo">more stuf</b></p>...

correct? That also means the bold stuff would have a green background. Am I right?

If this is correct, thanks!

Also, isn't: .classone .classtwo {background:green;}

the same as: .classone > .classtwo {background:green;}

pardicity3
02-10-2004, 04:15 AM
I will first direct you to a recent thread which will answer your question(s) very well: http://www.codingforums.com/showthread.php?s=&threadid=32707

Now then, .classone .classtwo is not the same as .classone > .classtwo. The first will select any element with the class "classtwo" contained anywhere inside of an element with the class "classone". Where as the second selector will only select an element with class "classtwo" that is a direct decendant of an element with class"classone". eg:
<div class="classone">
<div class="randomdiv">
<div class="classtwo"></div>
</div>
</div>Your first selector (.classone .classtwo) will select the div with class "classtwo", whereas your second selector will not. If your code was changed to:
<div class="classone">
<div class="classtwo"></div>
</div>Both selectors would select the div with class "classtwo".

freak
02-10-2004, 04:17 AM
Almost, but, not exactly.

.classone .classtwo matches any descendant of .classone with class .classtwo while .classone > .classtwo will match any child of .classone with class .classtwo.

For "english" translations of CSS Selectors check out the SelectORacle (http://gallery.theopalgroup.com/selectoracle/).

// freak

pardicity3
02-10-2004, 04:29 AM
Aren't the words "direct descendant" and "child" synonymous in the context of CSS?

qwertyuiop
02-10-2004, 04:53 AM
ok, i think i understand it now. Thanks all of you! :thumbsup:

mindlessLemming
02-10-2004, 08:24 AM
Originally posted by qwertyuiop


Also, isn't: .classone .classtwo {background:green;}
the same as: .classone > .classtwo {background:green;}

No, .classone > .classtwo *shouldn't* work. This is because a space is a combinator, as is ">".
You would type it as

.classone>.classtwo
Merely a heads up to avoid bad practices.

*untested



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum