Change color with each line break

Question

Change color with each line break

Navigation

#1 by (0 votes)

0

I use a lot of text, and each line changes the color, for example:

Linea uno // esta es negra

linea dos // esta es rosa

linea tres // esta es negra

linea cuatro// esta es rosa

And so. Maybe they tell me I can do this:

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

Or something similar, but I want to change to pink with each line break, and then when I make another one that changes to black.

html css

asked by Jenio158 22.10.2017 в 23:16

source

1 answer

ASP .NET MVC Form with field "Image" - Load an image in the "View" and insert it into the DB login with spring boot using jdbc

score 0 · Accepted Answer

You can use the pseudo class :nth-child combining odd and even .

odd : Represents the odd rows
even : Represents even rows

You can combine it with a class name or with HTML elements.

Example:

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

Documentation: Mozilla Developer Network (MDN)

Browser Compatibility:

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

If for some reason you have browser compatibility problems, you can assign two interspersed class names and change the colors by 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>