Skip to content

How to select the first child element with CSS

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

→ I wrote 17 books to help you become a better developer:

  • C Handbook
  • Command Line Handbook
  • CSS Handbook
  • Express Handbook
  • Git Cheat Sheet
  • Go Handbook
  • HTML Handbook
  • JS Handbook
  • Laravel Handbook
  • Next.js Handbook
  • Node.js Handbook
  • PHP Handbook
  • Python Handbook
  • React Handbook
  • SQL Handbook
  • Svelte Handbook
  • Swift Handbook
...download them all now!

Also, JOIN MY CODING BOOTCAMP, an amazing cohort course that will be a huge step up in your coding career - covering React, Next.js - next edition February 2025

Bootcamp 2025

Join the waiting list