Select first and last visible items in a list

Given a container with div children, some of which might have a .hidden class, how can I select the first and last visible items (that don’t have that class), using only css?

I tried:

div:not(.hidden):last-child Which doesn’t work because last-child is always the last child.

I mean in 2 declarations, not both at the same time.

>Solution :

Try the :nth-child() / :nth-last-child() pseudo-classes. Note that support is a little spotty, especially on mobile

.hidden {
  opacity: .2;
}

li:nth-child(1 of :not(.hidden)),
li:nth-last-child(1 of :not(.hidden)) {
  color: red;
}

<ul>
  <li class="hidden">One</li>
  <li>Two</li>
  <li>Three</li>
  <li>Four</li>
  <li class="hidden">Five</li>
</ul>
  

Further reading:

• :nth-child()
• :nth-last-child()