1

Here's a simple list.

It contains 6 items, the middle 2 are different from the first and last 2 by virtue of a different class.

I'm using CSS to try to pick out the items with a class of "lvl2" apart from the first one.

What I'm actually getting is all lvl2's being selected.

I'm guessing it doesn't see either as the first child because there are other 'li' elements earlier in the list.

The question is how do I fix it without javascript?

.container {
  margin: 50px;
}

li {
  height: 48px;
}

li.lvl1 {
  background-color: lime;
}

li.lvl2 {
  background-color: aqua;
}

li.lvl2:not(:first-child) {
  background-color:red!important;
}
<div class="container">
  <ul>
      <li class="lvl1">Item 1</li>
      <li class="lvl1">Item 2</li>
      <li class="lvl2">Item 3</li>
      <li class="lvl2">Item 4</li>
      <li class="lvl1">Item 5</li>
      <li class="lvl1">Item 6</li>
  </ul>
</div>
John Ohara
  • 2,821
  • 3
  • 28
  • 54
  • 4
    There is no "first of class" selector. However, you can do `.lvl2` and `.lvl2~.lvl2` to select all of them, and then (effectively) all but the first. – Niet the Dark Absol Aug 09 '18 at 14:28
  • Its does work - thanks Neit - but if it is a dupe I'm more than happy for it to be deleted - sorry Neit. – John Ohara Aug 09 '18 at 14:34

0 Answers0