CSS selezionare il primo bambino da elementi con attributo particolare

Question

Diciamo che abbiamo il seguente codice:

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

Come si va sulla selezione del primo figlio che ha attribuire pari a 3? Stavo pensando che forse questo potrebbe fare il lavoro:

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

... ma non ha funzionato

Answer 1

Il :first-child pseudo-classe guarda solo il primo nodo figlio, quindi, se il primo isn bambino' t an element[bla="3"], quindi non è selezionato nulla.

Non esiste una pseudo-classe di filtro simile per gli attributi. Un modo semplice per aggirare questo è di selezionare ognuno quindi escludere quello che viene dopo la prima (questo trucco è spiegato here e here):

element[bla="3"] { 
} 

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

Questo, naturalmente, funziona solo per l'applicazione di stili; se si vuole scegliere quell'elemento per scopi diversi styling (dal momento che il markup XML sembra essere arbitrario, piuttosto che HTML), dovrete usare qualcos'altro come document.querySelector():

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

o un'espressione XPath:

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