How to make every `<li>` with different background colors?

This is an example where i iterate through all li elements in your document and changing their background color. I predefined colors and after that I'm just using Math.random() to get random color from given array.

$('li').each(function() {
  var back = ["green","blue","gray","yellow","orange","purple","black"];
  var rand = back[Math.floor(Math.random() * back.length)];
  $(this).css('background',rand);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="en">
   <head>
<meta charset="UTF-8">
<title>Title</title>
 </head>
<body>
 <div id="dvi1" class="div1">
    <ul id="ul" class="ul">
      <li>11</li>
      <li>22</li>
      <li>33</li>
      <li>44</li>
   </ul>
</div>
</body>
</html>

EDIT: As requested in comments, i added function which will prevent loop to set same color two times in a row.

var lastPick;
var rand;
$('li').each(function() {
  $(this).css('background',randomColor());
});
function randomColor() {
  var back = ["green","blue","gray","yellow","orange","purple","pink"];
  rand = back[Math.floor(Math.random() * back.length)];
  rand==lastPick?randomColor():rand;
  lastPick = rand;
  return rand;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="en">
   <head>
<meta charset="UTF-8">
<title>Title</title>
 </head>
<body>
 <div id="dvi1" class="div1">
    <ul id="ul" class="ul">
      <li>11</li>
      <li>22</li>
      <li>33</li>
      <li>44</li>
   </ul>
</div>
</body>
</html>


This is very easy with CSS. You can use either :nth-child or :nth-of-type pseudo selectors.

The basics

To make things really simple to start with, let's consider the following HTML (I'll add your code in later on):

<div>
  <p>This is our first paragraph</p> <!-- This one should be blue -->
  <p>This is our second paragraph</p> <!-- This one should be red -->
</div>

Based on this HTML, if we wanted to make the <p> elements different colours, we could write either of the following CSS:

Option 1

p:nth-of-type(1) {
color: blue;
}

p:nth-of-type(2) {
color: red;
}

Option 2

p:nth-child(1) {
color: blue;
}

p:nth-child(2) {
color: red;
}

Pretty easy to see what's going on here. The number inside the brackets represents which element you want to select (1 = first element, 2 = second element, 3 = third element .etc). This doesn't help much if we don't want to manually write out lots of CSS for every possible number of elements though.

Take your own code as an example here. You've got a list - that list might only be used for something with a fixed number of elements (like a nav menu). In which case, no problem. We know the number of items that we need to style, so we can (probably) happily write CSS for a handful of elements.

However, if your list is dynamically populated (from a database or via Javascript), then there is going to be a potentially infinite number of elements. Or, if we still happen to know how big the list will be, and it just so happens that the list is going to be quite large - then we should probably find a more efficient way of writing our CSS. This brings me on to...

n-rules

n-rules are nothing more than algebra, in it's most basic form. You remember those annoying maths questions you were asked at school?

If n = 2, what is 5n + 1?

Yep, they've come back to haunt you. In the case of the question above - we know the answer is 11. n-rules are more or less written in the same way:

li:nth-of-type(5n+1) {
color: green;
}

In the case of the example above, we are selecting every 5th element. If we wrote our n-rule as 2n+1, we would select every other (every two) elements. So a rule of 10n+1 would select every 10 elements. The gap between elements increases or decreases, depending on the value of the multiplier before n.

If we didn't change the multiplier, but changed the +1 part of our n-rule, we would change the offset (i.e the first element affected by our rule). The +1 basically says "start me at the first element". So +2 would start us on the second element, and so on.

This does also mean that you can have a rule like this 3n-1, this would result in us starting at the very last element.

So, to give an example with your code. Lets say you wanted the following from your list:

  • The first item should be bold
  • The second item should have a blue background
  • The third item should have red text
  • This pattern should repeat for each group of 3 items in the list

You could write the following CSS rule:

li:nth-of-type(3n+1) {
font-weight: bold;
}

li:nth-of-type(3n+2) {
background: blue;
}

li:nth-of-type(3n+3) {
color: red;
}

But why does this work? If you want to know more, and do some experimentation on n-rules - take a look at CSS Tricks :nth Tester

Lastly

Right now you're probably thinking "what's the difference between :nth-of-type and :nth-child?"

:nth-child selector: This will apply CSS styles to an element, if both of the following conditions are true:

  • It's a direct match to an element we've specified.
  • It's the nth-child of a parent element.

:nth-of-type selector: This will apply CSS styles to an element, if the following condition is true:

  • It's a direct match to an element we've specified.

There's a subtle difference between the two. But basically, :nth-child is more specific about what it selects. Which can have it's uses- because we could specify a rule with :nth-of-type and then use :nth-child to override that rule for specific elements.

Read more about them here

Hope this helps :)

Tags:

Javascript

Html

Css

Recent Posts