css - tipos - ¿Cómo seleccionar el primer, segundo o tercer elemento con un nombre de clase dado?

selectores de css3

Question

¿Cómo puedo seleccionar un cierto elemento en una lista de elementos? Tengo lo siguiente:

<div class="myclass">my text1</div>
<!-- some other code follows -->
<div>
    <p>stuff</p>
</div>
<div>
    <p>more stuff</p>
</div>
<p>
    <span>Hello World</span>
</p>
<div class="myclass">my text2</div>
<!-- some other code follows -->
<div>
    <p>stuff</p>
</div>
<p>
    <span>Hello World</span>
</p>
<input type=""/>
<div class="myclass">my text3</div>
<!-- some other code follows -->
<div>
    <p>stuff</p>
</div>
<footer>The end</footer>

Tengo la clase CSS div.myclass {doing things} que se aplica a todos, obviamente, pero también quería poder seleccionar el primer, segundo o tercer div de clase .myclass como este, independientemente de dónde se encuentren en el marcado :

div.myclass:first {color:#000;} 
div.myclass:second {color:#FFF;} 
div.myclass:third {color:#006;}

Casi como la selección de índice jQuery .eq( index ) , que es lo que estoy usando actualmente, pero necesito una alternativa sin script.

Para ser específico, estoy buscando pseudo selectores, no cosas como agregar otra clase o usar ID para hacer que las cosas funcionen.

Answer 1

Esto no es tanto una respuesta como una falta de respuesta, es decir, un ejemplo que muestra por qué una de las respuestas más votadas es incorrecta.

Pensé que esa respuesta se veía bien. De hecho, me dio lo que estaba buscando :nth-of-type que, para mi situación, funcionó. (Entonces, gracias por eso, @Bdwey.)

Inicialmente leí el comentario de @BoltClock (que dice que la respuesta es esencialmente incorrecta) y lo descarté, ya que había revisado mi caso de uso, y funcionó. Entonces me di cuenta de que @BoltClock tenía una reputación de más de 300,000 (!) Y tiene un perfil donde dice ser un gurú de CSS. Hmm, pensé, tal vez debería mirar un poco más cerca.

Resulta de la siguiente manera: div.myclass:nth-of-type(2) NO significa "la segunda instancia de div.myclass". Más bien, significa "la segunda instancia de div, y también debe tener la clase ''myclass''". Esa es una distinción importante cuando existen div.myclass entre las instancias de div.myclass .

Me tomó algo de tiempo entender esto. Entonces, para ayudar a otros a resolverlo más rápido, escribí un ejemplo que creo que demuestra el concepto más claramente que una descripción escrita: he secuestrado los elementos h1 , h2 , h3 y h4 para ser esencialmente div s. He puesto una clase A en algunos de ellos, los he agrupado en 3, y luego he coloreado las instancias 1ª, 2ª y 3ª azul, naranja y verde usando h?.A:nth-of-type(?) . (Pero, si está leyendo cuidadosamente, debería preguntar "¿la 1ra, 2da y 3ra instancia de qué?"). También interpuse un elemento no clasificado diferente (es decir, diferente nivel h ) o similar (es decir, el mismo nivel h ) en algunos de los grupos.

Observe, en particular, la última agrupación de 3. Aquí, un elemento h3 clasificado se inserta entre el primero y el segundo elemento h3.A En este caso, no aparece el segundo color (es decir, naranja), y el tercer color (es decir, verde) aparece en la segunda instancia de h3.A Esto muestra que n en h3.A:nth-of-type(n) está contando el h3 s, no el h3.A s.

Bueno, espero que eso ayude. Y gracias, @BoltClock.

div {
  margin-bottom: 2em;
  border: red solid 1px;
  background-color: lightyellow;
}

h1,
h2,
h3,
h4 {
  font-size: 12pt;
  margin: 5px;
}

h1.A:nth-of-type(1),
h2.A:nth-of-type(1),
h3.A:nth-of-type(1) {
  background-color: cyan;
}

h1.A:nth-of-type(2),
h2.A:nth-of-type(2),
h3.A:nth-of-type(2) {
  background-color: orange;
}

h1.A:nth-of-type(3),
h2.A:nth-of-type(3),
h3.A:nth-of-type(3) {
  background-color: lightgreen;
}

<div>
  <h1 class="A">h1.A #1</h1>
  <h1 class="A">h1.A #2</h1>
  <h1 class="A">h1.A #3</h1>
</div>

<div>
  <h2 class="A">h2.A #1</h2>
  <h4>this intervening element is a different type, i.e. h4 not h2</h4>
  <h2 class="A">h2.A #2</h2>
  <h2 class="A">h2.A #3</h2>
</div>

<div>
  <h3 class="A">h3.A #1</h3>
  <h3>this intervening element is the same type, i.e. h3, but has no class</h3>
  <h3 class="A">h3.A #2</h3>
  <h3 class="A">h3.A #3</h3>
</div>

Answer 2

Probablemente finalmente se haya dado cuenta de esto al publicar esta pregunta y hoy, pero la naturaleza misma de los selectores hace que sea imposible navegar a través de elementos HTML jerárquicamente no relacionados.

O, para decirlo simplemente, ya que dijo en su comentario que

no hay contenedores uniformes para padres

... simplemente no es posible con selectores solo, sin modificar el marcado de alguna manera como lo muestran las otras respuestas.

Tienes que usar la .eq() jQuery .eq() .

Answer 3

Sí, usted puede hacer esto. Por ejemplo, para diseñar las etiquetas td que componen las diferentes columnas de una tabla, podría hacer algo como esto:

table.myClass tr > td:first-child /* First column */
{
  /* some style here */
}
table.myClass tr > td:first-child+td /* Second column */
{
  /* some style here */
}
table.myClass tr > td:first-child+td+td /* Third column */
{
  /* some style here */
}

Answer 4

Tal vez usando el selector "~" de CSS?

.myclass {
    background: red;
}

.myclass~.myclass {
    background: yellow;
}

.myclass~.myclass~.myclass {
    background: green;
}

Ver mi ejemplo en jsfiddle

Answer 5

use nth-child (número de artículo) EX

<div class="parent_class">
    <div class="myclass">my text1</div>
    some other code+containers...

    <div class="myclass">my text2</div>
    some other code+containers...

    <div class="myclass">my text3</div>
    some other code+containers...
</div>
.parent_class:nth-child(1) { };
.parent_class:nth-child(2) { };
.parent_class:nth-child(3) { };

O

: nth-of-type (número de elemento) mismo código

.myclass:nth-of-type(1) { };
.myclass:nth-of-type(2) { };
.myclass:nth-of-type(3) { };