Alternate background colors for list items

Question

I have a list  and each item is linked  is there a way I can alternate the background colors for each item    lt ul gt       lt li gt  lt a href  link  gt Link 1 lt  a gt  lt  li gt       lt li gt  lt a href  link  gt Link 2 lt  a gt  lt  li gt       lt li gt  lt a href  link  gt Link 3 lt  a gt  lt  li gt       lt li gt  lt a href  link  gt Link 4 lt  a gt  lt  li gt       lt li gt  lt a href  link  gt Link 5 lt  a gt  lt  li gt   lt  ul gt

User · Answer

You can achieve this by adding alternating style classes to each list item

<ul>
    <li class="odd"><a href="link">Link 1</a></li>
    <li><a href="link">Link 2</a></li>
    <li class="odd"><a href="link">Link 2</a></li>
    <li><a href="link">Link 2</a></li>
</ul>

And then styling it like

li { backgorund:white; }
li.odd { background:silver; }

You can further automate this process with javascript (jQuery example below)

$(document).ready(function() {
  $('table tbody tr:odd').addClass('odd');
});

User · Answer

You can by hardcoding the sequence  like so   li  li   li   li  li   li   li   li   li     background-color  black     li   li  li   li   li   li     background-color  white

User · Answer

If you want to do this purely in CSS then you d have a class that you d assign to each alternate list item   E g    lt ul gt       lt li class  alternate  gt  lt a href  link  gt Link 1 lt  a gt  lt  li gt       lt li gt  lt a href  link  gt Link 2 lt  a gt  lt  li gt       lt li class  alternate  gt  lt a href  link  gt Link 3 lt  a gt  lt  li gt       lt li gt  lt a href  link  gt Link 4 lt  a gt  lt  li gt       lt li class  alternate  gt  lt a href  link  gt Link 5 lt  a gt  lt  li gt   lt  ul gt    If your list is dynamically generated  this task would be much easier   If you don t want to have to manually update this content each time  you could use the jQuery library and apply a style alternately to each  lt li gt  item in your list    lt ul id  myList  gt       lt li gt  lt a href  link  gt Link 1 lt  a gt  lt  li gt       lt li gt  lt a href  link  gt Link 2 lt  a gt  lt  li gt       lt li gt  lt a href  link  gt Link 3 lt  a gt  lt  li gt       lt li gt  lt a href  link  gt Link 4 lt  a gt  lt  li gt       lt li gt  lt a href  link  gt Link 5 lt  a gt  lt  li gt   lt  ul gt    And your jQuery code     document  ready function          myList li nth-child odd    addClass  alternate

User · Answer

Since you using standard HTML you will need to define separate class for and manual set the rows to the classes

User · Answer

If you use the jQuery solution it will work on IE8   jQuery    document  ready function        myList li nth-child odd    addClass  alternate          CSS   alternate   background  black      If you use the CSS soloution it won t work on IE8   li nth-child odd        background  black

User · Answer

Since you using standard HTML you will need to define separate class for and manual set the rows to the classes

User · Answer

You can by hardcoding the sequence  like so   li  li   li   li  li   li   li   li   li     background-color  black     li   li  li   li   li   li     background-color  white

User · Answer

Since you using standard HTML you will need to define separate class for and manual set the rows to the classes

User · Answer

Try adding a pair of class attributes  say  even  and  odd   to alternating list elements  e g    lt ul gt       lt li class  even  gt  lt a href  link  gt Link 1 lt  a gt  lt  li gt       lt li class  odd  gt  lt a href  link  gt Link 2 lt  a gt  lt  li gt       lt li class  even  gt  lt a href  link  gt Link 3 lt  a gt  lt  li gt       lt li class  odd  gt  lt a href  link  gt Link 4 lt  a gt  lt  li gt       lt li class  even  gt  lt a href  link  gt Link 5 lt  a gt  lt  li gt   lt  ul gt    In a  lt style gt  section of the HTML page  or in a linked stylesheet  you would define those same classes  specifying your desired background colours   li even   background-color  red    li odd   background-color  blue      You might want to use a template library as your needs evolve to provide you with greater flexibility and to cut down on the typing  Why type all those list elements by hand

User · Answer

You can do it by specifying alternating class names on the rows  I prefer using row0 and row1  which means you can easily add them in  if the list is being built programmatically   for   i   0   i  lt  10     i        echo   lt tr class  row      i   2       gt     lt  tr gt        Another way would be to use javascript  jQuery is being used in this example      table tr odd   addClass  row1      Edit  I don t know why I gave examples using table rows    replace tr with li and table with ul and it applies to your example

User · Answer

You can do it by specifying alternating class names on the rows  I prefer using row0 and row1  which means you can easily add them in  if the list is being built programmatically   for   i   0   i  lt  10     i        echo   lt tr class  row      i   2       gt     lt  tr gt        Another way would be to use javascript  jQuery is being used in this example      table tr odd   addClass  row1      Edit  I don t know why I gave examples using table rows    replace tr with li and table with ul and it applies to your example

User · Answer

If you want to do this purely in CSS then you d have a class that you d assign to each alternate list item   E g    lt ul gt       lt li class  alternate  gt  lt a href  link  gt Link 1 lt  a gt  lt  li gt       lt li gt  lt a href  link  gt Link 2 lt  a gt  lt  li gt       lt li class  alternate  gt  lt a href  link  gt Link 3 lt  a gt  lt  li gt       lt li gt  lt a href  link  gt Link 4 lt  a gt  lt  li gt       lt li class  alternate  gt  lt a href  link  gt Link 5 lt  a gt  lt  li gt   lt  ul gt    If your list is dynamically generated  this task would be much easier   If you don t want to have to manually update this content each time  you could use the jQuery library and apply a style alternately to each  lt li gt  item in your list    lt ul id  myList  gt       lt li gt  lt a href  link  gt Link 1 lt  a gt  lt  li gt       lt li gt  lt a href  link  gt Link 2 lt  a gt  lt  li gt       lt li gt  lt a href  link  gt Link 3 lt  a gt  lt  li gt       lt li gt  lt a href  link  gt Link 4 lt  a gt  lt  li gt       lt li gt  lt a href  link  gt Link 5 lt  a gt  lt  li gt   lt  ul gt    And your jQuery code     document  ready function          myList li nth-child odd    addClass  alternate

User · Answer

How about some lovely CSS3   li   background  green    li nth-child odd    background  red

User · Answer

You can achieve this by adding alternating style classes to each list item

<ul>
    <li class="odd"><a href="link">Link 1</a></li>
    <li><a href="link">Link 2</a></li>
    <li class="odd"><a href="link">Link 2</a></li>
    <li><a href="link">Link 2</a></li>
</ul>

And then styling it like

li { backgorund:white; }
li.odd { background:silver; }

You can further automate this process with javascript (jQuery example below)

$(document).ready(function() {
  $('table tbody tr:odd').addClass('odd');
});

User · Answer

If you want to do this purely in CSS then you d have a class that you d assign to each alternate list item   E g    lt ul gt       lt li class  alternate  gt  lt a href  link  gt Link 1 lt  a gt  lt  li gt       lt li gt  lt a href  link  gt Link 2 lt  a gt  lt  li gt       lt li class  alternate  gt  lt a href  link  gt Link 3 lt  a gt  lt  li gt       lt li gt  lt a href  link  gt Link 4 lt  a gt  lt  li gt       lt li class  alternate  gt  lt a href  link  gt Link 5 lt  a gt  lt  li gt   lt  ul gt    If your list is dynamically generated  this task would be much easier   If you don t want to have to manually update this content each time  you could use the jQuery library and apply a style alternately to each  lt li gt  item in your list    lt ul id  myList  gt       lt li gt  lt a href  link  gt Link 1 lt  a gt  lt  li gt       lt li gt  lt a href  link  gt Link 2 lt  a gt  lt  li gt       lt li gt  lt a href  link  gt Link 3 lt  a gt  lt  li gt       lt li gt  lt a href  link  gt Link 4 lt  a gt  lt  li gt       lt li gt  lt a href  link  gt Link 5 lt  a gt  lt  li gt   lt  ul gt    And your jQuery code     document  ready function          myList li nth-child odd    addClass  alternate

User · Answer

This is set background color on even and odd li     li nth-child odd    background   ffffff      li nth-child even    background   80808030

User · Answer

You can do it by specifying alternating class names on the rows  I prefer using row0 and row1  which means you can easily add them in  if the list is being built programmatically   for   i   0   i  lt  10     i        echo   lt tr class  row      i   2       gt     lt  tr gt        Another way would be to use javascript  jQuery is being used in this example      table tr odd   addClass  row1      Edit  I don t know why I gave examples using table rows    replace tr with li and table with ul and it applies to your example

User · Answer

This is set background color on even and odd li     li nth-child odd    background   ffffff      li nth-child even    background   80808030

User · Answer

You can achieve this by adding alternating style classes to each list item

<ul>
    <li class="odd"><a href="link">Link 1</a></li>
    <li><a href="link">Link 2</a></li>
    <li class="odd"><a href="link">Link 2</a></li>
    <li><a href="link">Link 2</a></li>
</ul>

And then styling it like

li { backgorund:white; }
li.odd { background:silver; }

You can further automate this process with javascript (jQuery example below)

$(document).ready(function() {
  $('table tbody tr:odd').addClass('odd');
});

User · Answer

Try adding a pair of class attributes  say  even  and  odd   to alternating list elements  e g    lt ul gt       lt li class  even  gt  lt a href  link  gt Link 1 lt  a gt  lt  li gt       lt li class  odd  gt  lt a href  link  gt Link 2 lt  a gt  lt  li gt       lt li class  even  gt  lt a href  link  gt Link 3 lt  a gt  lt  li gt       lt li class  odd  gt  lt a href  link  gt Link 4 lt  a gt  lt  li gt       lt li class  even  gt  lt a href  link  gt Link 5 lt  a gt  lt  li gt   lt  ul gt    In a  lt style gt  section of the HTML page  or in a linked stylesheet  you would define those same classes  specifying your desired background colours   li even   background-color  red    li odd   background-color  blue      You might want to use a template library as your needs evolve to provide you with greater flexibility and to cut down on the typing  Why type all those list elements by hand

User · Answer

You can by hardcoding the sequence  like so   li  li   li   li  li   li   li   li   li     background-color  black     li   li  li   li   li   li     background-color  white

User · Answer

Since you using standard HTML you will need to define separate class for and manual set the rows to the classes

User · Answer

You can achieve this by adding alternating style classes to each list item

<ul>
    <li class="odd"><a href="link">Link 1</a></li>
    <li><a href="link">Link 2</a></li>
    <li class="odd"><a href="link">Link 2</a></li>
    <li><a href="link">Link 2</a></li>
</ul>

And then styling it like

li { backgorund:white; }
li.odd { background:silver; }

You can further automate this process with javascript (jQuery example below)

$(document).ready(function() {
  $('table tbody tr:odd').addClass('odd');
});

User · Answer

Try adding a pair of class attributes  say  even  and  odd   to alternating list elements  e g    lt ul gt       lt li class  even  gt  lt a href  link  gt Link 1 lt  a gt  lt  li gt       lt li class  odd  gt  lt a href  link  gt Link 2 lt  a gt  lt  li gt       lt li class  even  gt  lt a href  link  gt Link 3 lt  a gt  lt  li gt       lt li class  odd  gt  lt a href  link  gt Link 4 lt  a gt  lt  li gt       lt li class  even  gt  lt a href  link  gt Link 5 lt  a gt  lt  li gt   lt  ul gt    In a  lt style gt  section of the HTML page  or in a linked stylesheet  you would define those same classes  specifying your desired background colours   li even   background-color  red    li odd   background-color  blue      You might want to use a template library as your needs evolve to provide you with greater flexibility and to cut down on the typing  Why type all those list elements by hand

User · Answer

How about some lovely CSS3   li   background  green    li nth-child odd    background  red

User · Answer

You can by hardcoding the sequence  like so   li  li   li   li  li   li   li   li   li     background-color  black     li   li  li   li   li   li     background-color  white

User · Answer

If you want to do this purely in CSS then you d have a class that you d assign to each alternate list item   E g    lt ul gt       lt li class  alternate  gt  lt a href  link  gt Link 1 lt  a gt  lt  li gt       lt li gt  lt a href  link  gt Link 2 lt  a gt  lt  li gt       lt li class  alternate  gt  lt a href  link  gt Link 3 lt  a gt  lt  li gt       lt li gt  lt a href  link  gt Link 4 lt  a gt  lt  li gt       lt li class  alternate  gt  lt a href  link  gt Link 5 lt  a gt  lt  li gt   lt  ul gt    If your list is dynamically generated  this task would be much easier   If you don t want to have to manually update this content each time  you could use the jQuery library and apply a style alternately to each  lt li gt  item in your list    lt ul id  myList  gt       lt li gt  lt a href  link  gt Link 1 lt  a gt  lt  li gt       lt li gt  lt a href  link  gt Link 2 lt  a gt  lt  li gt       lt li gt  lt a href  link  gt Link 3 lt  a gt  lt  li gt       lt li gt  lt a href  link  gt Link 4 lt  a gt  lt  li gt       lt li gt  lt a href  link  gt Link 5 lt  a gt  lt  li gt   lt  ul gt    And your jQuery code     document  ready function          myList li nth-child odd    addClass  alternate

User · Answer

You can do it by specifying alternating class names on the rows  I prefer using row0 and row1  which means you can easily add them in  if the list is being built programmatically   for   i   0   i  lt  10     i        echo   lt tr class  row      i   2       gt     lt  tr gt        Another way would be to use javascript  jQuery is being used in this example      table tr odd   addClass  row1      Edit  I don t know why I gave examples using table rows    replace tr with li and table with ul and it applies to your example

User · Answer

Try adding a pair of class attributes  say  even  and  odd   to alternating list elements  e g    lt ul gt       lt li class  even  gt  lt a href  link  gt Link 1 lt  a gt  lt  li gt       lt li class  odd  gt  lt a href  link  gt Link 2 lt  a gt  lt  li gt       lt li class  even  gt  lt a href  link  gt Link 3 lt  a gt  lt  li gt       lt li class  odd  gt  lt a href  link  gt Link 4 lt  a gt  lt  li gt       lt li class  even  gt  lt a href  link  gt Link 5 lt  a gt  lt  li gt   lt  ul gt    In a  lt style gt  section of the HTML page  or in a linked stylesheet  you would define those same classes  specifying your desired background colours   li even   background-color  red    li odd   background-color  blue      You might want to use a template library as your needs evolve to provide you with greater flexibility and to cut down on the typing  Why type all those list elements by hand

User · Answer

If you use the jQuery solution it will work on IE8   jQuery    document  ready function        myList li nth-child odd    addClass  alternate          CSS   alternate   background  black      If you use the CSS soloution it won t work on IE8   li nth-child odd        background  black

[html] Alternate background colors for list items

Examples related to html

Examples related to css