Utilko logo Utilko
combinator

Child Combinator

Matches element B when it is a direct child of element A. Unlike the descendant combinator, it does not match deeper nested elements.

A > B

Example

ul > li { list-style: square; } /* Only direct <li> children */

✓ Matches

  • <ul><li>A</li></ul>
  • <ul><li>A</li><li>B</li></ul>
  • <nav><ul><li>Direct</li></ul></nav> the li is a direct child of ul

✗ Does not match

  • <ul><div><li>Nested</li></div></ul> since li is not a direct child of ul
  • <ol><li>A</li></ol> since parent is ol, not ul

Browser support

Universal support in all browsers since CSS2.

Related selectors

Descendant Combinator
A B
Adjacent Sibling Combinator
A + B

← All CSS selectors · CSS selectors cheat sheet