Selector CSS3: ¿primero de tipo con nombre de clase?

El borrador de Selectores CSS Nivel 4 propone agregar una gramática of <other-selector> dentro de la :nth-child selector . Esto le permitiría elegir el nésimo hijo que coincida con un selector dado:

:nth-child(1 of p.myclass) 

Los borradores anteriores usaban una nueva pseudo-clase, :nth-match(), así que puede ver esa sintaxis en algunas discusiones de la característica:

:nth-match(1 of p.myclass)

Esto ahora ha sido implementado en WebKit, y por lo tanto está disponible en Safari, pero parece ser el único navegador que lo soporta. Hay tickets archivados para implementarlo Blink (Chrome), Gecko (Firefox), y una solicitud para implementarlo en Edge, pero no hay progreso aparente en ninguno de estos.

Encontré una solución para su referencia. de algunos divs del grupo seleccione del grupo de dos divs 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 se por qué :last-of-type funciona, pero :first-of-type no funciona.

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

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

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

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

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

This It not posible usar el selector CSS3 : first-of-type para seleccionar el primer elemento con un nombre de clase dado.

Sin embargo, si el elemento objetivo tiene un elemento hermano anterior, puede combinar la pseudo-clase CSS de negación y los selectores hermanos adyacentes para que coincida con un elemento que no tiene inmediatamente un elemento anterior con el mismo nombre de clase:

:not(.myclass1) + .myclass1

Código de trabajo completo ejemplo:

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>

Como una solución alternativa, podría envolver sus clases en un elemento padre 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>

No estoy seguro de cómo explicar esto, pero me encontré con algo similar hoy. No poder establecer .user:first-of-type{} mientras que .user:last-of-type{} funcionó bien. Esto se arregló después de que los envolví dentro de un div sin ninguna clase o estilo:

Https://codepen.io/adrianTNT/pen/WgEpbE

<style>
.user{
  display:block;
  background-color:#FFCC00;
}

.user:first-of-type{
  background-color:#FF0000;
}
</style>

<p>Not working while this P additional tag exists</p>

<p class="user">A</p>
<p class="user">B</p>
<p class="user">C</p>

<p>Working while inside a div:</p>

<div>
<p class="user">A</p>
<p class="user">B</p>
<p class="user">C</p>
</div>

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