0

Manejo mucho texto, y cada linea la cambio de color, por ejemplo:

Linea uno // esta es negra

linea dos // esta es rosa

linea tres // esta es negra

linea cuatro// esta es rosa

Y así. Quizá me digan que puedo hacer esto:

<style>
l1{color: #111;}
l2{color: #ed1e79;}
</style>
<p class="l1">asdasdasdsadasdas</p>
<p class="l2">asdasdasdsadasdas</p>

O algo parecido, pero quiero que con cada salto de linea cambie a rosa, y luego cuando hago otro que cambie a negro.

1
  • Sí todos sus elementos son párrafos <p> , puede emplear p:nth-child(odd) para elementos impares y p:nth-child(even) para los pares y así darles el estilo correspondiente.
    – Dev. Joel
    el 22 oct. 2017 a las 21:24

1 respuesta 1

0

Puedes usar la pseudo clase :nth-child combinando odd y even.

  • odd: Representa las filas impares
  • even: Representa las filas pares

Lo puedes combinar con un nombre de clase o con elementos HTML.

Ejemplo:

.lista p:nth-child(odd) {
  color: #111;
}

.lista p:nth-child(even) {
  color: #ed1e79;
}
<div class="lista">
  <p>asdasdasdsadasdas</p>
  <p>asdasdasdsadasdas</p>
  <p>asdasdasdsadasdas3</p>
  <p>asdasdasdsadasdas4</p>
<div>

Compatibilidad de navegadores:

  • Chrome: 1.0+
  • Firefox: 3.5+ (1.9.1)
  • Internet Explorer: 9.0+
  • Opera: 9.5+
  • Safari: 3.1+

Si por algún motivo tuvieras problemas de compatibilidad de navegadores, puedes asignar dos nombres de clase intercalados y cambiar los colores por CSS:

.lista-impar {
  color: #111;
}

.lista-par {
  color: #ed1e79;
}
<p class="lista-impar">asdasdasdsadasdas</p>
<p class="lista-par">asdasdasdsadasdas</p>
<p class="lista-impar">asdasdasdsadasdas3</p>
<p class="lista-par">asdasdasdsadasdas4</p>

9
  • Pero tendria que agregar la class a cada salto de linea que no? seria lo mismo que cambiarlo de color, como lo harias con wordpress. Porque la pagina esta en wordpress y como es mucho texto tengo que estar cambiando de linea con cambiar el color de formato
    – Jenio158
    el 22 oct. 2017 a las 21:51
  • @Jenio158 puedes encerrar todo el bloque dentro de un div con un nombre de clase y aplicar las reglas CSS como se indica en la respuesta. De ese modo no tendrías que poner el nombre de la clase en todos los <p>. He editado la respuesta, lo puedes ver en el primer ejemplo. En cuanto a tu pregunta sobre WP, desde WordPress 4.7 puedes agregar CSS personalizado desde el Escritorio de WP: Them->Customize->Additional CSS. Ver este enlace
    – A. Cedano
    el 22 oct. 2017 a las 21:58
  • Ya casi, entre al codigo de mi tema y vi que el texto esta encerrado en un div como dijiste, pero con el nombre separator, asi que puse esto: .separator:nth-child(odd) { color: #111; } .separator:nth-child(even) { color: #ed1e79; } // Si funciona, pero cuando se da un salto de linea (porque esta en parrafos no funciona)
    – Jenio158
    el 22 oct. 2017 a las 22:06
  • 1
    @Jenio158 observa el código editado. Sólo tienes que poner esto: .separator p:nth-child(odd) { color: #111; } .separator p:nth-child(even) { color: #ed1e79; } o sea agregar la ppara que alcance los elementos <p> dentro del div. Debe funcionar si el div estuviese así: <div class="separator">.
    – A. Cedano
    el 22 oct. 2017 a las 22:13
  • 1
    @Shareiv no, yo no trabajo por $... si te puedo ayudar lo hago, pero sin salirme del marco de SO, preguntas-respuestas. Saludos.
    – A. Cedano
    el 22 oct. 2017 a las 22:14

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

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