selectores - Selector de CSS3: primero en su tipo con nombre de clase?

selectores css

Question

¿Es posible usar el selector CSS3 :first-of-type para seleccionar el primer elemento con un nombre de clase dado? No he tenido éxito con mi examen, así que estoy pensando 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>

Answer 1

Como solución alternativa, puede ajustar sus clases en un elemento primario como este:

<div>
<div>This text should appear as normal</div>
<p>This text should be blue.</p>
<div>
<!-- first-child / first-of-type starts from here -->
<p class="myclass1">This text should appear red.</p>
<p class="myclass2">This text should appear green.</p>
</div>
</div>

Answer 2

El borrador de los selectores de CSS Nivel 4 propone agregar una gramática of <other-selector> dentro del selector :nth-child . Esto le permitiría seleccionar al n- ésimo niño que coincide con un otro selector dado:

:nth-child(1 of p.myclass)

Los borradores anteriores utilizaron una nueva pseudoclase, :nth-match() , por lo que puede ver esa sintaxis en algunas discusiones de la característica:

:nth-match(1 of p.myclass)

Esto ahora se implementó en WebKit y, por lo tanto, está disponible en Safari, pero parece ser el único navegador que lo admite . Hay entradas archivadas para implementarlo, Blink (Chrome) , Gecko (Firefox) , y una solicitud para implementarlo en Edge , pero no hay progreso aparente en ninguno de estos.

Answer 3

Encontré una solución para su referencia. de algunos grupos de grupos de usuarios, seleccione de un grupo de dos grupos de personas de la misma clase, el primero

p[class*="myclass"]:not(:last-of-type) {color:red}
p[class*="myclass"]:last-of-type {color:green}

Por cierto, no sé por qué :last-of-type trabajos de :last-of-type , pero :first-of-type no funciona.

Mis experimentos en jsfiddle ... https://jsfiddle.net/aspanoz/m1sg4496/

Answer 4

Este es un hilo viejo, pero estoy respondiendo porque todavía aparece en la parte superior de la lista de resultados de búsqueda. Ahora que ha llegado el futuro, puede usar el pseudo-selector n-child.

p:nth-child(1) { color: blue; }
p.myclass1:nth-child(1) { color: red; }
p.myclass2:nth-child(1) { color: green; }

El pseudo-selector n-child es poderoso: los paréntesis aceptan fórmulas y números.

Más aquí: https://developer.mozilla.org/en-US/docs/Web/CSS/:nth-child

Answer 5

Esto no es posible usar el selector CSS3 : primero en su tipo 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 de negación CSS y los selectores de hermanos adyacentes para que coincida con un elemento que no tenga 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>

Answer 6

No, no es posible usar solo un selector. La :first-of-type clase de pseudoclase selecciona el primer elemento de su tipo ( div , p , etc.). 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-class selector de :first-of-class que solo elige la primera aparición de una clase. Como solución alternativa, puede usar algo como esto:

.myclass1 { color: red; }
.myclass1 ~ .myclass1 { color: /* default, or inherited from parent div */; }

Las explicaciones e ilustraciones para la solución se dan here y here .

Answer 7

Simplemente: primero funciona para mí, ¿por qué no se menciona esto todavía?