nuevos - selectores css

CSS selecciona el primer elemento secundario de elementos con un atributo particular

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 vas a seleccionar el primer niño que tiene un atributo 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 solo mira el primer nodo hijo, por lo que si el primer elemento secundario no es un element[bla="3"] , entonces no se selecciona nada.

No hay una pseudoclase de filtro similar para los atributos. Una manera fácil de evitar esto es seleccionar cada una y luego excluir lo que viene después de la primera (este truco se explica aquí y aquí ):

element[bla="3"] {
}

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

Esto, por supuesto, solo funciona para aplicar estilos; si desea seleccionar ese elemento para fines distintos al estilo (dado que su marcado parece ser XML arbitrario en lugar de HTML), 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]