Geek Answers Handbook

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

How to make each <li> with different background colors?

 <!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>
+5
source share
2 answers

This is an example where I iterate over all li elements in your document and change their background color. I predefined the colors, and after that I just use Math.random() to get a random color from the 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 the comments , I added a function that will prevent the loop from setting the same color twice 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>
+6
source

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

The basics

To make it very easy to start, consider the following HTML (I will add your code later):

 <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 want to make the <p> elements in different colors, we could write any 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; }

It's pretty easy to see what happens here. The number inside the brackets is the element you want to select (1 = first element, 2 = second element, 3 = third element .etc). It doesn’t help much if we don’t want to manually write a lot of CSS for every possible number of elements.

Take your own code as an example. You have a list - this list can only be used for something with a fixed number of elements (for example, a navigation menu). In this case there is no problem. We know the number of elements that we need to style, so we can (probably) happily write CSS for several elements.

However, if your list is dynamically populated (from the database or through Javascript), then there will be a potentially infinite number of elements. Or, if we still know how big the list is, and it so happens that the list is quite large, then we probably should find a more efficient way to write our CSS. It led me to ...

n-rules

n-rules are nothing more than algebra, in it the most basic form. Do you remember the annoying math questions you asked at school?

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

Yes, they are back to haunt you. In the case of the question above, we know that answer 11. The n-rules are more or less written the same way:

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

In the above example, we select every fifth element. If we write our n-rule as 2n+1 , we will select all the remaining (every two) elements. Thus, the 10n+1 rule will select every 10 elements. The gap between the elements increases or decreases, depending on the value of the factor, to n .

If we did not change the factor, but changed the +1 part of our n-rule, we would change the offset (that is, the first element that our rule affected). +1 basically says, "Start me with the first element." So, +2 will launch us in the second element, etc.

It also means that you might have a rule like 3n-1 , this will cause us to start from the very last element.

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

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

You can 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 learn more and do some n-rule experimentation, check out CSS tricks: nth Tester

Finally

Now you are probably thinking: "What is the difference between :nth-of-type and :nth-child ?"

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

  • Direct match with the specified item.
  • This is the nth-child of the parent element.

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

  • Direct match with the specified item.

There is a subtle difference between the two. But basically :nth-child more specifically about what it chooses. Which one could it be used because we could specify a rule with :nth-of-type , and then use :nth-child to override this rule for certain elements.

More about them here

Hope this helps :)

+1
source

More articles:


All Articles