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

¿Es posible usar el selector CSS3 :first-of-typepara seleccionar el primer elemento con un nombre de clase dado? No he tenido éxito con 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 solo un selector. El :first-of-typepseudo-clase 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-classselector que solo elija 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 aquí y aquí .

El borrador de Selectores CSS Nivel 4 propone agregar una of <other-selector>gramática dentro del :nth-childselector . Esto permitirá elegir el n º niño coinciden con un selector de otra dada:

:nth-child(1 of p.myclass) 

Los borradores anteriores usaban una nueva pseudoclase :nth-match(), por lo que puede ver 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 archivados 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 : primero de tipo para seleccionar el primer elemento con un nombre de clase dado.

Sin embargo, si el elemento objetivo tiene un elemento anterior hermano, puede combinar la pseudoclase 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

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>

Encontré una solución para su referencia. de algunos divs grupales 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 sé por qué :last-of-typefunciona, pero :first-of-typeno 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 ha llegado el futuro, 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 y números.

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

Como solución alternativa, puede ajustar sus clases en un elemento principal 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 configurar .user:first-of-type{}mientras .user:last-of-type{}funcionaba bien. Esto se solucionó después de envolverlos 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>

Puede hacer esto seleccionando cada elemento de la clase que sea el hermano de la misma clase e invirtiéndolo, lo que seleccionará prácticamente todos los elementos de la página, por lo que debe seleccionar nuevamente por clase.

p.ej:

<style>
    :not(.bar ~ .bar).bar {
        color: red;
    }
<div>
    <div class="foo"></div>
    <div class="bar"></div> <!-- Only this will be selected -->
    <div class="foo"></div>
    <div class="bar"></div>
    <div class="foo"></div>
    <div class="bar"></div>
</div>

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