How to Properly Use the “>” (greater-than sign) CSS selector

  >   is the child combinator in CSS. That means the selector div, span, p, h1 etc. >  .my-class   only selects the requested  .my-class   objects that are nested directly inside a div, span, p, etc. and not any objects that are nested further within.

Here is an illustration:

What’s selected and what’s not:

  1.  Selected  –  .my-class   is located directly inside .my-div   – a parent-child relationship is established between both elements.
  2.   Not selected  –  .my-class (2) is contained by a second div with another class (.my-div2) within the div, rather than the div itself. Although this  is a descendant of the div, it’s not a child; it’s a grandchild.

Here is the CSS that modifies the background-color of .my-class(parent-child) to red and leaves the same class unchanged even if they have the same class name (.my-class).

Try it Yourself

Let’s take a look at a more complex example to see how it works:

Try it Yourself