Select all child elements except the first

Question

Apu November 19, 2022 › #Element › #HowTo

❌

Select all child elements except the first

Today our problem is we want to select all child elements except the first one using JavaScript. For example, we have the following code.

<ol>
  <li>Home</li>
  <li>About</li>
  <li>Contact</li>
</ol>

Now, what we have to do is we have to select all li elements and add a class name child to both of them except the first li element. Like the following example.

<style>
  .child{color:red}
</style>
<ol>
  <li>Home</li>
  <li>About</li>
  <li>Contact</li>
</ol>
<script>
 const lists = document.querySelectorAll("li:not(:first-child)");

 for(let i = 0; i<lists.length; i++) {
  lists[i].classList.add('child')
 }
</script>


 Example : add class to li elements except the first. #
<ol>
  <li>Home</li>
  <li class="child">About</li>
  <li class="child">Contact</li>
</ol>

We can use the :not() and :first-child selectors. E.g.

document.querySelectorAll("li:not(:first-child)");

Write Your Answer

Apu · Accepted Answer · 2022-11-19T10:38:52+05:30

Today our problem is we want to select all child elements except the first one using Java…