CSS seleccionar el primer hijo de los elementos, con especial atributo

Question

Digamos que tenemos el siguiente código:

<node> 
    <element bla="1"/> 
    <element bla="2"/> 
    <element bla="3"/> 
    <element bla="3"/> 
    <element bla="3"/> 
    <element bla="4"/> 
</node> 

Cómo haría usted para seleccionar el primer niño que ha atribuir igual a 3? Estaba pensando que tal vez esto podría hacer el trabajo:

element[bla="3"]:first-child 

... pero no funcionó

Answer 1

La pseudo-clase :first-child sólo se ve en el primer nodo hijo, por lo que si el primer hijo ISN' t element[bla="3"], luego no se selecciona nada.

No existe una pseudoclase de filtro similar para los atributos. Una manera fácil de evitar esto es para seleccionar cada uno, entonces excluye lo que viene después de la primera (este truco se explica here y here):

element[bla="3"] { 
} 

element[bla="3"] ~ element[bla="3"] { 
    /* Reverse the above rule */ 
} 

Esto, por supuesto, sólo funciona para la aplicación de estilos; si desea seleccionar ese elemento para fines distintos de estilo (ya que su margen de beneficio parece ser arbitraria XML en lugar de HTML), que tendrá que usar algo más como document.querySelector():

var firstChildWithAttr = document.querySelector('element[bla="3"]'); 

o una expresión XPath:

//element[@bla='3'][1]