CODEWITHSUNDEEP
htmlcsscss-selectors
Peter Mannings
Peter Mannings

Reputation: 111

What is the difference between these two classes

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 ?

Upvotes: 4

Views: 116

Answers (3)

Jon Egerton
Jon Egerton

Reputation: 41539

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.

Upvotes: 7

jacktheripper
jacktheripper

Reputation: 14219

> selects direct descendants of something that have class .somethingelse

Currently there is no parent (<) selector in CSS

Upvotes: 0

devdigital
devdigital

Reputation: 34349

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.

Upvotes: 3

Related Questions