css3 - seleccionar - selector padre css

CSS selecciona el primer elemento con una 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 esto

.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>

la primera ''prueba'' div tiene solo color rojo.

Answer 2

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

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

No intente utilizar .myclass:not(.myclass ~ .myclass) para hacer esto en una sola regla, no funcionará ya que :not() solo acepta selectores simples entre paréntesis.

Si desea la primera .myclass en todo el documento, no hay forma de hacerlo solo con CSS.

Los enfoques :nth-of-type() o :nth-child() 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
}