What is the difference between these two classes

Question

I don't know how they are different in css

something
{
   //some properties
}

something >.somethingelse
{
   // something else's properties
}

and

something
{
   //some properties
}

something .somethingelse
{
   // something else's properties
}

I don't know why there is such a > in the second case. Should there also be a < for use too ?

http://stackoverflow.com/questions/8014845/not-understanding-the-child-selector — PeeHaa, Sep 03 '12 at 22:13
http://stackoverflow.com/questions/632954/parentchild-css-selector?rq=1 — PeeHaa, Sep 03 '12 at 22:14

Jon Egerton · Accepted Answer · 2012-09-03T22:28:20.573

7

The > indicates that direct children somethingelse are found under something. Otherwise descendants will be found at all levels.

So using this following example:

<div class="something">
    <div class="somethingelse">
        <div class="somethingelse">
        </div>
    </div>
</div>

For the > example only the outer somethingelse div will take effect. For the example without > both divs will have the style applied.

< might imply a parent selector (ie apply a style to the direct parent of a matching class). I'm not aware of this existing yet, but theres an interesting post on it a csstricks here.

edited Sep 03 '12 at 22:28

answered Sep 03 '12 at 22:14

Jon Egerton

40,401
11
97
129

`Should there also be a < for use too ?` :) – sabithpocker Sep 03 '12 at 22:23
2

@sabithpocker: in CSS4 [selector subjects](http://www.w3.org/TR/2012/WD-selectors4-20120823/#subject) are to be introduced. Basically you'd be able to match any element (not necessary the right-most) in a given relationship - e.g. `!p a` will match paragraphs that contain links. Note this is still a draft, I believe at one stage w3c intended to propose using `$` for subject selector – Oleg Sep 03 '12 at 22:47
@o.v.: Yeah, and they haven't decided whether to use `!` yet, and if so whether to put it before or after the compound selector. `$` proved too confusing for people used to variable syntax from other languages. – BoltClock Sep 04 '12 at 11:14

score 3 · Answer 2 · answered Sep 03 '12 at 22:14

The > selects any element with the class .somethingelse which is a child of an element with the class .something.

The second CSS selector will select any descendents of the element with the class .something. I.e. the children, and the childrens children, and so on.

score 0 · Answer 3 · answered Sep 03 '12 at 22:15

0

> selects direct descendants of something that have class .somethingelse

Currently there is no parent (<) selector in CSS

answered Sep 03 '12 at 22:15

jacktheripper

13,953
12
57
93

What is the difference between these two classes

3 Answers3