Skip to content

How to select the first child element with CSS

The Valley of Code

Your Web Development Manual

Problem: in my markdown file I had the need to style the first ul, the table of contents, and I couldn’t add a class or an id to target it with CSS.

So I looked into how to target it with a selector.

The HTML structure was this:

<div id="content">
  <ul>
    ...the TOC
  </ul>

  ...rest of the HTML
</div>

This worked to select the first child of div#content and leave other ul elements unaffected:

div#content > ul:first-of-type {
  ...my styles
}
→ Get my CSS Handbook
→ Read my CSS Tutorial on The Valley of Code
  • THE VALLEY OF CODE (+ PRO), your web development manual
  • I wrote 15+ free coding BOOKS, download them here
  • SOLOPRENEUR LAND the missing MBA for wannabe solopreneurs craving a life with more freedom, control, fulfillment and purpose (summer 2024)