0

I have the following unordered list and CSS.

.hideMe { display: none; }
li:last-child { background: blue}
<ul>
  <li>test 1</li>
  <li>test 2</li>
  <li>test 3</li>
  <li class="hideMe">test 5</li>
  <li>test 6</li>
  <li class="hideMe">test 7</li>
  <li class="hideMe">test 8</li>
</ul>

The last element that is visible needs to have special styling. In this case <li>test 6</li> should have a blue background.

I have tried a few different things.

li:last-child:not(.hideMe) { background: blue}
li:not(.hideMe):last-child { background: blue}

Neither work. I know this can be solved with JS, but I was hoping to solve it with CSS.

Side Note: This is not a case of previous/next siblings.

Any thoughts?

TylerH
  • 20,799
  • 66
  • 75
  • 101
ZombieCode
  • 1,646
  • 2
  • 24
  • 46
  • This wasn't about siblings. The answer is not in the related link. – ZombieCode Aug 16 '22 at 04:09
  • About last visible child: https://stackoverflow.com/questions/52968782/selecting-last-visible-child-using-css I don't think it's possible using CSS only. – qrsngky Aug 16 '22 at 06:51

0 Answers0