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

css, css-selectors

Solution

`>` is the child combinator, sometimes mistakenly called the direct descendant combinator.1

That means the selector `div > p.some_class` only matches paragraphs of `.some_class` that are nested directly inside a `div`, and not any paragraphs that are nested further within. This implies that every element matching `div > p.some_class` necessarily also matches `div p.some_class`, with the descendant combinator (space), so the two are understandably often confused.

An illustration comparing the child combinator with the descendant combinator:

div > p.some_class { 
    background: yellow;
}

div p.some_class { 
    color: red;
}

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

Which elements are matched by which selectors?

Matched by both `div > p.some_class` and `div p.some_class` This `p.some_class` is located directly inside the `div`, hence a parent-child relationship is established between both elements. Since "child" is a type of "descendant", any child element is by definition also a descendant. Therefore, both rules are applied.

Matched by only `div p.some_class` 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. Therefore, only the rule with the descendant combinator in its selector is applied.

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 immediate by definition anyway, so they mean the exact same thing. There's no such thing as an "indirect child".

Problem

Original source