Targeting elements using CSS nth-child pseudo-class selectors

Targeting elements using CSS nth-child pseudo-class selectors

Learn more about CSS :nth-child pseudo-class selectors which offer an incredibly flexible method for targeting elements within a container. It can accept an integer as a parameter to select a specific child or a formula in the format of an+b to select a repeating pattern of children.

Remember in CSS the :nth-child pseudo-class counts elements starting from 1, not 0. This means the first child element of a parent is :nth-child(1), the second child is :nth-child(2) and so on.

Targeting First element

Let’s assume :first-child is our selector targeting only first element.

  • HTML
  • CSS
  • JS
  • jQuery
  • Figma
  • Adobe
  • PHP
  • WordPress
  • Markdown
  • Jekyll
  • JamStack
  • API

HTML and CSS

  <ul class="select-only-first-element">
    <li>HTML</li>
    <li>CSS</li>
    <li>JS</li>
    <li>jQuery</li>
    <li>Figma</li>
    <li>Adobe</li>
    <li>PHP</li>
    <li>WordPress</li>
    <li>Markdown</li>
    <li>Jekyll</li>
    <li>JamStack</li>
    <li>API</li>
  </ul>
  
  <style>
    ul.select-only-first-element li:first-child {
      color: red;
      font-weight: bold;
    }
  </style>

Targeting Last element

Let’s assume :last-child is our selector targeting only last element.

  • HTML
  • CSS
  • JS
  • jQuery
  • Figma
  • Adobe
  • PHP
  • WordPress
  • Markdown
  • Jekyll
  • JamStack
  • API

HTML and CSS

  <ul class="select-only-last-element">
    <li>HTML</li>
    <li>CSS</li>
    <li>JS</li>
    <li>jQuery</li>
    <li>Figma</li>
    <li>Adobe</li>
    <li>PHP</li>
    <li>WordPress</li>
    <li>Markdown</li>
    <li>Jekyll</li>
    <li>JamStack</li>
    <li>API</li>
  </ul>
  
  <style>
    ul.select-only-first-element li:last-child {
      color: red;
      font-weight: bold;
    }
  </style>

Targeting Specific element

Let’s assume :nth-child(3) is our selector targeting only 3rd element.

  • HTML
  • CSS
  • JS
  • jQuery
  • Figma
  • Adobe
  • PHP
  • WordPress
  • Markdown
  • Jekyll
  • JamStack
  • API

HTML and CSS

  <ul class="select-third-element">
    <li>HTML</li>
    <li>CSS</li>
    <li>JS</li>
    <li>jQuery</li>
    <li>Figma</li>
    <li>Adobe</li>
    <li>PHP</li>
    <li>WordPress</li>
    <li>Markdown</li>
    <li>Jekyll</li>
    <li>JamStack</li>
    <li>API</li>
  </ul>

  <style>
    ul.select-third-element li:nth-child(3) {
      color: red;
      font-weight: bold;
    }
  </style>

Targeting Even elements

Let’s assume :nth-child(even) is our selector targeting every even element.

  • HTML
  • CSS
  • JS
  • jQuery
  • Figma
  • Adobe
  • PHP
  • WordPress
  • Markdown
  • Jekyll
  • JamStack
  • API

HTML and CSS

  <ul class="select-even-elements">
    <li>HTML</li>
    <li>CSS</li>
    <li>JS</li>
    <li>jQuery</li>
    <li>Figma</li>
    <li>Adobe</li>
    <li>PHP</li>
    <li>WordPress</li>
    <li>Markdown</li>
    <li>Jekyll</li>
    <li>JamStack</li>
    <li>API</li>
  </ul>
  
  <style>
    ul.select-even-elements li:nth-child(even) {
      color: red;
      font-weight: bold;
    }
  </style>

Targeting Odd elements

Let’s assume :nth-child(odd) is our selector is our selector targeting every odd element.

  • HTML
  • CSS
  • JS
  • jQuery
  • Figma
  • Adobe
  • PHP
  • WordPress
  • Markdown
  • Jekyll
  • JamStack
  • API

HTML and CSS

  <ul class="select-odd-elements">
    <li>HTML</li>
    <li>CSS</li>
    <li>JS</li>
    <li>jQuery</li>
    <li>Figma</li>
    <li>Adobe</li>
    <li>PHP</li>
    <li>WordPress</li>
    <li>Markdown</li>
    <li>Jekyll</li>
    <li>JamStack</li>
    <li>API</li>
  </ul>
  
  <style>
    ul.select-odd-elements li:nth-child(odd) {
      color: red;
      font-weight: bold;
    }
  </style>

Targeting a Pattern of Elements

Let’s assume :nth-child(3n+1) is our selector targeting every third element starting from the first one.

  • HTML
  • CSS
  • JS
  • jQuery
  • Figma
  • Adobe
  • PHP
  • WordPress
  • Markdown
  • Jekyll
  • JamStack
  • API

HTML and CSS

  <ul class="select-every-third-plus-one-element">
    <li>HTML</li>
    <li>CSS</li>
    <li>JS</li>
    <li>jQuery</li>
    <li>Figma</li>
    <li>Adobe</li>
    <li>PHP</li>
    <li>WordPress</li>
    <li>Markdown</li>
    <li>Jekyll</li>
    <li>JamStack</li>
    <li>API</li>
  </ul>
  
  <style>
    ul.select-every-third-plus-one-element li:nth-child(3n+1) {
      color: red;
      font-weight: bold;
    }
  </style>

Let’s assume :nth-child(3n) is our selector targeting every third element starting from the third one.

  • HTML
  • CSS
  • JS
  • jQuery
  • Figma
  • Adobe
  • PHP
  • WordPress
  • Markdown
  • Jekyll
  • JamStack
  • API

HTML and CSS

  <ul class="select-every-third-element">
    <li>HTML</li>
    <li>CSS</li>
    <li>JS</li>
    <li>jQuery</li>
    <li>Figma</li>
    <li>Adobe</li>
    <li>PHP</li>
    <li>WordPress</li>
    <li>Markdown</li>
    <li>Jekyll</li>
    <li>JamStack</li>
    <li>API</li>
  </ul>
  
  <style>
    ul.select-every-third-element li:nth-child(3n) {
      color: red;
      font-weight: bold;
    }
  </style>

Targeting only first number of elements

Let’s assume :nth-child(-n+3) is our selector targeting only first three elements.

  • HTML
  • CSS
  • JS
  • jQuery
  • Figma
  • Adobe
  • PHP
  • WordPress
  • Markdown
  • Jekyll
  • JamStack
  • API

HTML and CSS

  <ul class="select-only-first-three-elements">
    <li>HTML</li>
    <li>CSS</li>
    <li>JS</li>
    <li>jQuery</li>
    <li>Figma</li>
    <li>Adobe</li>
    <li>PHP</li>
    <li>WordPress</li>
    <li>Markdown</li>
    <li>Jekyll</li>
    <li>JamStack</li>
    <li>API</li>
  </ul>
  
  <style>
    ul.select-only-first-three-elements li:nth-child(-n+3) {
      color: red;
      font-weight: bold;
    }
  </style>

Negation Pseudo-class

Example 1: Let’s assume :not(:nth-child(2)) is our selector targeting all children except the second one.

  • HTML
  • CSS
  • JS
  • jQuery
  • Figma
  • Adobe
  • PHP
  • WordPress
  • Markdown
  • Jekyll
  • JamStack
  • API

HTML and CSS

  <ul class="select-all-except-second-element">
    <li>HTML</li>
    <li>CSS</li>
    <li>JS</li>
    <li>jQuery</li>
    <li>Figma</li>
    <li>Adobe</li>
    <li>PHP</li>
    <li>WordPress</li>
    <li>Markdown</li>
    <li>Jekyll</li>
    <li>JamStack</li>
    <li>API</li>
  </ul>
  
  <style>
    ul.select-all-except-second-element li:not(:nth-child(2)) {
      color: red;
      font-weight: bold;
    }
  </style>


Example 2: Let’s assume :not(:nth-child(3n+1)) is our selector targeting all children except every third element.

  • HTML
  • CSS
  • JS
  • jQuery
  • Figma
  • Adobe
  • PHP
  • WordPress
  • Markdown
  • Jekyll
  • JamStack
  • API

HTML and CSS

  <ul class="select-all-except-every-third-element">
    <li>HTML</li>
    <li>CSS</li>
    <li>JS</li>
    <li>jQuery</li>
    <li>Figma</li>
    <li>Adobe</li>
    <li>PHP</li>
    <li>WordPress</li>
    <li>Markdown</li>
    <li>Jekyll</li>
    <li>JamStack</li>
    <li>API</li>
  </ul>
  
  <style>
    ul.select-all-except-every-third-element li:not(:nth-child(3n+1)) {
      color: red;
      font-weight: bold;
    }
  </style>

Example 3: Let’s assume :not(:nth-child(-n+3)) is our selector targeting all children except first three elements.

  • HTML
  • CSS
  • JS
  • jQuery
  • Figma
  • Adobe
  • PHP
  • WordPress
  • Markdown
  • Jekyll
  • JamStack
  • API

HTML and CSS

  <ul class="select-all-except-first-three-elements">
    <li>HTML</li>
    <li>CSS</li>
    <li>JS</li>
    <li>jQuery</li>
    <li>Figma</li>
    <li>Adobe</li>
    <li>PHP</li>
    <li>WordPress</li>
    <li>Markdown</li>
    <li>Jekyll</li>
    <li>JamStack</li>
    <li>API</li>
  </ul>
  
  <style>
    ul.select-all-except-first-three-elements li:not(:nth-child(-n+3)) {
      color: red;
      font-weight: bold;
    }
  </style>

​

Remember: CSS counts elements starting from 1 not 0.

Previous
Create simple CSS only animated loader
Next
Create custom Tabbed navigation

Domains and Web Hosting

Maxer domain and web hosting

Virtual server

Get server with Digital ocean