What does a ">" after a pseudo-class (:first-child) do in CSS?

Question

I encountered the following selector in a menu template:

#cssmenu ul ul li:first-child > a

I'm not asking what the greater than character or :first-child pseudo-class do, but how these two work together to select what they select.

Here is the HTML:

<div id='cssmenu'>
  <ul>
    <li><a href='#'><span>Home</span></a></li>
    <li class='active has-sub'><a href='#'><span>Products</span></a>
      <ul>
        <li class='has-sub'><a href='#'><span>Product 1</span></a>
          <ul>
            <li><a href='#'><span>Sub Product</span></a></li>
            <li class='last'><a href='#'><span>Sub Product</span></a></li>
          </ul>
        </li>
        <li class='has-sub'><a href='#'><span>Product 2</span></a>
          <ul>
            <li><a href='#'><span>Sub Product</span></a></li>
            <li class='last'><a href='#'><span>Sub Product</span></a></li>
          </ul>
        </li>
      </ul>
    </li>
    <li><a href='#'><span>About</span></a></li>
    <li class='last'><a href='#'><span>Contact</span></a></li>
  </ul>
</div>

*"What does a “>” after a pseudo-class (:first-child) do in CSS?"* It does the same thing as it always does: selecting children. — Felix Kling, Aug 21 '15 at 15:27

score 1 · Answer 1 · answered Aug 21 '15 at 15:25

1

It's just your garden-variety child selector. In this case it selects the child of the first list item.

answered Aug 21 '15 at 15:25

isherwood

58,414
16
114
157

score 0 · Accepted Answer · answered Aug 21 '15 at 15:27

0

#cssmenu ul ul

Selects the unordered lists inside of the unordered lists inside the element with id "cssmenu".

li:first-child

Selects the first list item in each of the unordered lists selected above.

> a

Selects the direct, and only direct, descendant anchors of each of the list items selected above.

answered Aug 21 '15 at 15:27

Big McLargeHuge

14,841
10
80
108

What confuses me is that the selector applies not only to ul ul li:first-child > a, but also to ul ul ul li:first-child > a – Rafael X Villalobos Aug 21 '15 at 16:06
Right, because `ul ul ul` meets all of the criteria above (unordered lists inside of unordered lists inside the element with id "cssmenu"). If you *don't* want to select those, you could try `#cssmenu > ul > ul > li:first-child > a` or something similar. – Big McLargeHuge Aug 21 '15 at 16:24

score 0 · Answer 3 · answered Aug 21 '15 at 15:28

0

The :first-child selector allows you to target the first element immediately inside another element and the > selector just does what it does the best, i.e. selects the direct anchors inside it.

answered Aug 21 '15 at 15:28

DirtyBit

16,613
4
34
55

What does a ">" after a pseudo-class (:first-child) do in CSS?

3 Answers3