Misha Moroshko Misha Moroshko - 2 months ago 11
CSS Question

What does the ">" (greater-than sign) CSS selector mean?

For example:

div > p.some_class {
/* Some declarations */
}


What exactly does the
>
sign mean?

Answer

> is the child combinator, also known as the direct descendant combinator.1

That means the selector div > p.some_class only selects paragraphs of .some_class that sit directly inside a div, not paragraphs that are nested further within.

An illustration:

<div>
    <p class="some_class">Some text here</p>     <!-- Selected [1] -->
    <blockquote>
        <p class="some_class">More text here</p> <!-- Not selected [2] -->
    </blockquote>
</div>

What's selected and what's not:

  1. Selected
    This p.some_class is located directly inside the div, hence a parent-child relationship is established between both elements.

  2. Not selected
    This p.some_class is contained by a blockquote within the div, rather than the div itself. Although this p.some_class is a descendant of the div, it's not a child; it's a grandchild.

    Consequently, while div > p.some_class won't match this element, div p.some_class will, using the descendant combinator instead.


1 Many people go further to call it "direct child" or "immediate child", but that's completely unnecessary (and incredibly annoying to me), because a child element is direct/immediate by definition anyway, so they mean the exact same thing. There's no such thing as an "indirect child".