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

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

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

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

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

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 achieve this by adding alternating style classes to each list item   lt ul gt       lt li class  odd  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  odd  gt  lt a href  link  gt Link 2 lt  a gt  lt  li gt       lt li gt  lt a href  link  gt Link 2 lt  a gt  lt  li gt   lt  ul gt    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

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

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

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

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

You can achieve this by adding alternating style classes to each list item   lt ul gt       lt li class  odd  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  odd  gt  lt a href  link  gt Link 2 lt  a gt  lt  li gt       lt li gt  lt a href  link  gt Link 2 lt  a gt  lt  li gt   lt  ul gt    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 achieve this by adding alternating style classes to each list item   lt ul gt       lt li class  odd  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  odd  gt  lt a href  link  gt Link 2 lt  a gt  lt  li gt       lt li gt  lt a href  link  gt Link 2 lt  a gt  lt  li gt   lt  ul gt    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

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 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 achieve this by adding alternating style classes to each list item   lt ul gt       lt li class  odd  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  odd  gt  lt a href  link  gt Link 2 lt  a gt  lt  li gt       lt li gt  lt a href  link  gt Link 2 lt  a gt  lt  li gt   lt  ul gt    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

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

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

[html] Alternate background colors for list items

Examples related to html

Examples related to css