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 21 books to help you become a better developer:

  • HTML Handbook
  • Next.js Pages Router Handbook
  • Alpine.js Handbook
  • HTMX Handbook
  • TypeScript Handbook
  • React Handbook
  • SQL Handbook
  • Git Cheat Sheet
  • Laravel Handbook
  • Express Handbook
  • Swift Handbook
  • Go Handbook
  • PHP Handbook
  • Python Handbook
  • Linux Commands Handbook
  • C Handbook
  • JavaScript Handbook
  • Svelte Handbook
  • CSS Handbook
  • Node.js Handbook
  • Vue Handbook
...download them all now!

Related posts that talk about css: