Come faccio a scegliere come target il primo figlio che non ha una particolare classe?

Question

Se ho il seguente codice HTML

<ul id="some_list"> 
    <li class="hide">Do Not Target This</li> 
    <li class="hide">Do Not Target This</li> 
    <li>Target This</li> 
    <li>Do Not Target This</li> 
</ul> 

Come faccio a indirizzare il primo figlio che non ha la classe di nascondere? es.

#some_list>li:not(.hide):first-child { 
    color: #777; 
} 

Ma questo non funziona.

Fiddle

Answer 1

Si potrebbe utilizzare i CSS adjacent sibling selector al fine di selezionare il primo li elemento che non ha la classe .hide:

EXAMPLE HERE.

li:first-child:not(.hide), 
li.hide + li:not(.hide) { 
    background-color: gold; 
} 

Considera anche controllando il primo elemento della lista (il primo figlio) per l'esistenza di .hide nome della classe.

Answer 2

utilizzando JavaScript si potrebbe fare questo

http://jsfiddle.net/h_awk/5G5ED/4/

<script> 
var parent = document.getElementById('some_list'), 
    child = parent.getElementsByTagName('li'); 

child[2].style.color = 'blue'; 
</script> 

Answer 3

penso che questo è ciò che si vuole

#some_list>li.hide + li:not(.hide){ 

    color: #CCC; 

}