What function does the `>` have in a CSS selector?

In the project example here:

https://codepen.io/El_Escandalo/pen/ExYWapa?editors=1100

I am confused by this code in the CSS:

#how-it-works > iframe {
  max-width: 560px;
  width: 100%;
}

I am confused by this specific code: #how-it-works > iframe

Why don’t they just use a selector for the iframe element? What function does the > have? What does associating the iframe with the #how-it-works element achieve? Thanks

It’s an iframe that is the direct child of an element with the ID how-it-works, as opposed to an iframe anywhere else on the page.

1 Like

Hi ,
It signifies one of the combinators in CSS. Some types are:-

  • descendant selector (space)
  • child selector (>)
  • adjacent sibling selector (+)
1 Like