CODEWITHSUNDEEP
htmlcss
Bob S
Bob S

Reputation: 84

Text color change on alternate line breaks?

I'd like to make a list where the next line would have a text color change then revert back to the previous color on the next line.

I've looked all over for an answer on this before asking but found nothing. I have a simple html text list (not a table) that changes often. Span tags would work but on a big list, inserting a new line would require moving all the span tags.

Is there a solution to get this to happen on a line break such as a div class of css styling?

This is the style of the list

   <p style="font-family:arial; etc; etc">
   <br>blah blah
   <br>blah blah
   <br>blah etc</p>

Upvotes: 4

Views: 3979

Answers (2)

Paulie_D
Paulie_D

Reputation: 115046

If you are using an actual list then I recommend the option by @Tushar Gupta.

If you are using plain text then there is no specific CSS selector that can determine line-breaks (other than actual <br/> tags).

What you can do is fake it by using a repeating linear gradient with suitable color stops at a known line height.

This will change the background of each line (your fallback) but if the browser supports...

-webkit-background-clip: text;
-webkit-text-fill-color: transparent;

...it will "change" the text color.

Reference Article @ CSS-Tricks.com

.stripey {
  width: 50%;
  margin: 25px auto;
  padding: .25rem;
  border: 1px solid red;
  line-height: 1.25rem; /* same as color stop increments */
}
.stripey p {
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-image: repeating-linear-gradient(
    to bottom, 
    blue, 
    blue 1.25rem, 
    red 1.25rem, 
    red 2.5rem
  );
}
<div class="stripey">
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ratione laboriosam dignissimos, eligendi consequatur, suscipit ipsa excepturi eaque, placeat dicta animi voluptas libero nemo corporis deserunt quod hic repellat, consectetur dolorum saepe neque
    quam fugiat temporibus rem minus? Mollitia expedita assumenda maxime. Debitis fugiat nam quam quibusdam, suscipit cupiditate! Ab, totam.</p>
</div>

Upvotes: 3

Tushar Gupta
Tushar Gupta

Reputation: 15923

You can use CSS to catch the alternate child of the list 

li { color: green; }
li:nth-child(odd) { color: red; }
<ul>
    <li>Link 1</a></li>
    <li>Link 2</a></li>
    <li>Link 3</a></li>
    <li>Link 4</a></li>
    <li>Link 5</a></li>
</ul>

Upvotes: 3

Related Questions