How to Select all Elements Except the First Using CSS

To select all elements except the first using css, we may use the :not(:first-child) operator.

h2:not(:first-child){
    background-color: red;
  }

All h2 elements in your entire web page will have a background color of red except the very first h2 element.

Apply some style to the li element except the first one. #

In this example, we will apply some style to the li elements except the first one. For example, we have the following code.

<ol>
  <li>One</li>
  <li>Two</li>
  <li>Three</li>
  <li>Four</li>
  <li>Five</li>
</ol>

Now, we don't have any class or id to seperate the first li element.

Here we can use the :not(:first-child) selector to style all li elements except the very first one.

<style>
  li:not(:first-child){
    background-color: red;
    margin-top:8px;
  }
</style>
<ol>
  <li>One</li>
  <li>Two</li>
  <li>Three</li>
  <li>Four</li>
  <li>Five</li>
</ol>

Conclusion #

In this article, you have learned How to Select all Elements Except the First With the CSS. Using the :not(:first-child) operator, we can select all elements (h1, div, p) except the first child.