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

Question

For example:

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

What exactly does the > sign mean?

Answer 1

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

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

An illustration:

div > p.some_class { 
    background: yellow;
}

<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.

---

¹ _{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".}