A selector to match the first item that doesn't have some class

Question

Assuming I have a list like this one:

<ul>
    <li class="hidden">Horse</li>
    <li>Bear</li>
    <li>Cat</li>
</ul>

Is it possible to get the first li item that doesn't has the class .hidden, I tried this and many others but it didn't work:

li:not(.hidden):nth-child(1) {
    /* ... */
}

Fiddle with test

Answer 1

This StackOverflow answer explains this topic in great detail. Using the solution of "apply to all of them, then remove everything except the first" works on your Fiddle:

li:not(.hidden){
    color: #0F0;
}

li:not(.hidden) ~ li:not(.hidden){
    color: inherit;
}