CSS selecciona el primer elemento con cierta clase

Question

¿Cuál es la sintaxis para seleccionar el primer elemento con una cierta clase? Especifique si ese método de selección es parte de CSS3 o CSS2.1.

Answer 1

Prueba este

.testparent .test:first-child { 
    color: red; 
} 

<div class="testparent"> 
<div class="test">test</div> 
<div class="test">test</div> 
<div class="test">test</div> 
</div> 

el primer 'test' div tiene solamente el rojo.

Answer 2

Si necesita el primer elemento con una cierta clase entre sus hermanos, puede utilizar

.myclass { 
    /* styles of the first one */ 
} 

.myclass ~ .myclass { 
    /* styles of the others (must cancel the styles of the first rule) */ 
} 

No trate de usar .myclass:not(.myclass ~ .myclass) hacer esto en una sola regla, no va a funcionar desde :not() solo acepta selectores simples entre paréntesis.

Si quiere el primer .myclass en todo el documento, no hay forma de hacerlo solo con CSS.

Los :nth-of-type() o :nth-child() enfoques publicados son incorrectos, incluso si casualmente coinciden con los elementos que desea en su página.

Compatibilidad con el navegador del selector de hermanos (~): IE7 + y todos los demás.

Answer 3

.class-name:first-of-type { 
    ⋮ declarations 
}