Selector CSS3: ¿primero de tipo con nombre de clase?
¿Es posible utilizar el selector CSS3 :first-of-typepara seleccionar el primer elemento con un nombre de clase determinado? No he tenido éxito en mi prueba, así que creo que no.
El código ( http://jsfiddle.net/YWY4L/ ):
p:first-of-type {color:blue}
p.myclass1:first-of-type {color:red}
.myclass2:first-of-type {color:green}<div>
<div>This text should appear as normal</div>
<p>This text should be blue.</p>
<p class="myclass1">This text should appear red.</p>
<p class="myclass2">This text should appear green.</p>
</div>
No, no es posible usar un solo selector. La :first-of-typepseudoclase selecciona el primer elemento de su tipo ( div,, petc.). Usar un selector de clase (o un selector de tipo) con esa pseudoclase significa seleccionar un elemento si tiene la clase dada (o es del tipo dado) y es el primero de su tipo entre sus hermanos.
Desafortunadamente, CSS no proporciona un :first-of-classselector que solo elija la primera aparición de una clase. Como solución alternativa, puedes usar algo como esto:
.myclass1 { color: red; }
.myclass1 ~ .myclass1 { color: /* default, or inherited from parent div */; }
Aquí y aquí se proporcionan explicaciones e ilustraciones para la solución alternativa .
El borrador de Selectores CSS Nivel 4 propone agregar una of <other-selector>gramática dentro del :nth-childselector . Esto le permitiría seleccionar el enésimo niño que coincida con otro selector determinado:
:nth-child(1 of p.myclass)
Los borradores anteriores usaban una nueva pseudoclase, :nth-match()por lo que es posible que veas esa sintaxis en algunas discusiones sobre la característica:
:nth-match(1 of p.myclass)
Esto ahora se ha implementado en WebKit y, por lo tanto, está disponible en Safari, pero parece ser el único navegador que lo admite . Hay tickets presentados para implementarlo Blink (Chrome) , Gecko (Firefox) y una solicitud para implementarlo en Edge , pero no hay progreso aparente en ninguno de estos.
Esto no es posible utilizar el selector CSS3 : first-of-type para seleccionar el primer elemento con un nombre de clase determinado.
Sin embargo, si el elemento de destino tiene un elemento hermano anterior, puede combinar la pseudoclase CSS de negación y los selectores de hermanos adyacentes para que coincida con un elemento que no tiene inmediatamente un elemento anterior con el mismo nombre de clase:
:not(.myclass1) + .myclass1
Ejemplo de código de trabajo completo:
p:first-of-type {color:blue}
p:not(.myclass1) + .myclass1 { color: red }
p:not(.myclass2) + .myclass2 { color: green }<div>
<div>This text should appear as normal</div>
<p>This text should be blue.</p>
<p class="myclass1">This text should appear red.</p>
<p class="myclass2">This text should appear green.</p>
</div>