Select :first-child or :last-child that doesn't contain some specific class

Question

Assume we\'re having a list with 5 items and we want to apply some specific styles to the first or the last child. But the functionality of this list will requi

Answer 1

You can add specific style to first visible child, like this:

.hide {display: none;}
div:not(.hide){
  color: red;
}
div:not(.hide) ~ div:not(.hide){
    color: black; /*reset everything to normal*/
}

But there is no way select last visible child with css. For this you need use javascript