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, 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:

    
Some text here
     
    

        
More text here
 

    

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