2

Estoy realizando un ejercicio en el que tengo que colorear todos los artículos impares de un color y los pares de otro.

Como tengo cada artículo separado por section, he implementado en CSS lo siguiente:

section:nth-of-type(odd){
   background: #DBDBDB;
}

section:nth-of-type(even){
   background: #33C9FF;
}

Pero el único que me funciona es el (even) coloreando todo del color especificado en este.

PD: Perdonadme, antes he puesto even dos veces, pero fue al estar trasteando con él dado el error. Lo he corregido varias veces y sigue sin ir.

Siento la tardanza he estado trasteando con el código y al parecer, como ya han comentado algunos he tenido errores en el html. Siento el lío, y gracias por la aportación a todos.

8
  • 1
    En tu código se duplica nth-of-type(even). Creo que querías hacer uno de ellos el nth-of-type(odd).
    – Krizz
    el 30 ene. 2018 a las 20:23
  • Sugiero que cambies :nth-of-type() por :nth-child(). el 30 ene. 2018 a las 20:28
  • @EdgarGutiérrez ¿por qué? ¿qué cambiaría? ¿qué regla se aplicaría con nth-child() que no se aplique con nth-of-type()? Además, ya hay una respuesta con esto mismo.
    – Mariano
    el 30 ene. 2018 a las 20:31
  • 1
    Hola @Pavl. ¿Podrías publicar el HTML que reproduce el caso donde no se apliquen bien las reglas? La idea es que todas las preguntas tengan un ejemplo mínimo verificable.
    – Mariano
    el 30 ene. 2018 a las 20:34
  • 1
    Yo he probado tu ejemplo y funciona perfectamente... jsfiddle.net/9zy7kcj0. Deberías agregar tu código HTML ya que ahora la pregunta se puede cerrar como no reproducible... el 30 ene. 2018 a las 20:40

2 respuestas 2

2

Prueba con nth-child(even) y nth-child(odd) de la siguiente manera:

section:nth-child(even) {background: #CCC}
section:nth-child(odd) {background: #FFF}
<section>  1 </section>
<section>  2 </section>
<section>  3 </section>
<section>  4 </section>

EDITADO:

Probando el código con nth-of-type:

section:nth-of-type(odd){
   background: green;
}

section:nth-of-type(even){
   background: red;
}
<section>  1 </section>
<section>  2 </section>
<section>  3 </section>
<section>  4 </section>

Ambas pruebas si funcionan... Quizá sea la forma en la que estás colocando el HTML.

Saludos.

2
  • No veo ninguna diferencia con nth-of-type(). ¿Por qué nth-child() funcionaría en un caso que nth-of-type() no?
    – Mariano
    el 30 ene. 2018 a las 20:26
  • Tienes razón, acabo de verificar que con ambos tipos funciona, supongo que es la forma en la cuál estás colocando el HTML, recuerda poner un ejemplo según es.stackoverflow.com/help/mcve el 30 ene. 2018 a las 20:45
0

La pseudo-clase CSS :nth-of-type(an+b) selecciona, en el árbol del documento, el elemento que tiene an+b-1 hermanos con el mismo nombre de elemento situados antes que él, para un n con valor positivo o cero, y que tiene un elemento padre. Ver :nth-child para una descripción más detallada de la sintaxis de los argumentos de esta pseudo-clase. :nth-of-type(an+b) es un pseudo-selector más flexible y útil si quiere asegurarse de seleccionar el mismo tipo de etiqueta, sin importar donde está situada dentro de su elemento padre, o que otro tipo de etiquetas aparecen antes de ella.

Developer Mozilla

Ademas:

El selector n-ésimo ( n ) coincide con cada elemento que es el n- ésimo hijo, de un tipo particular, de su padre.

n puede ser un número, una palabra clave o una fórmula.

Consejo: Observe el selector : nth-child () para seleccionar el elemento que es el n- ésimo hijo, independientemente del tipo , de su elemento primario.

section:nth-of-type(odd) {
    background: #444444;
    color: #fff;
}

section:nth-of-type(even) {
    background: #ffff00;
}
<body>

<section>Primera seccion.</section>
<section>Segunda seccion</section>
<section>Tercera seccion</section>
<section>Cuarta seccion</section>

</body>

PD: Quiza no funcione porque estas usando los selectores(HTML)

1
  • ¿Y por qué funciona? ¿Cuál es la diferencia? La idea de las respuestas es que tengan una descripción de la solución implementada.... Asumo que fue sólo el descuido del autor al usar 2 veces even, pero sería bueno leerlo en tu respuesta
    – Mariano
    el 30 ene. 2018 a las 20:27

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.