Blog Post

The Direct Descendant Combinator

Posted by John Rhea

Direct descendant selector combinator > prevents grandchildren from being selected for instance with this HTML

<div class="zombie">
    <p><a href="https://example.zom">hello zombie</a></p>
    <a href="https://example2.zom">goodbye zombie</a>
</div>Code language: HTML, XML (xml)

The following CSS will only select the “goodbye zombie” link

.zombie > a { color: red; }Code language: CSS (css)