code_junkie

Alternate background colors for list items

Nov 12th, 2011
63
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 1.76 KB | None | 0 0
  1. <ul>
  2. <li><a href="link">Link 1</a></li>
  3. <li><a href="link">Link 2</a></li>
  4. <li><a href="link">Link 3</a></li>
  5. <li><a href="link">Link 4</a></li>
  6. <li><a href="link">Link 5</a></li>
  7. </ul>
  8.  
  9. <ul>
  10. <li class="alternate"><a href="link">Link 1</a></li>
  11. <li><a href="link">Link 2</a></li>
  12. <li class="alternate"><a href="link">Link 3</a></li>
  13. <li><a href="link">Link 4</a></li>
  14. <li class="alternate"><a href="link">Link 5</a></li>
  15. </ul>
  16.  
  17. <ul id="myList">
  18. <li><a href="link">Link 1</a></li>
  19. <li><a href="link">Link 2</a></li>
  20. <li><a href="link">Link 3</a></li>
  21. <li><a href="link">Link 4</a></li>
  22. <li><a href="link">Link 5</a></li>
  23. </ul>
  24.  
  25. $(document).ready(function(){
  26. $('#myList li:nth-child(odd)').addClass('alternate');
  27. });
  28.  
  29. li { background: green; }
  30. li:nth-child(odd) { background: red; }
  31.  
  32. <ul>
  33. <li class="odd"><a href="link">Link 1</a></li>
  34. <li><a href="link">Link 2</a></li>
  35. <li class="odd"><a href="link">Link 2</a></li>
  36. <li><a href="link">Link 2</a></li>
  37. </ul>
  38.  
  39. li { backgorund:white; }
  40. li.odd { background:silver; }
  41.  
  42. $(document).ready(function() {
  43. $('table tbody tr:odd').addClass('odd');
  44. });
  45.  
  46. <ul>
  47. <li class="even"><a href="link">Link 1</a></li>
  48. <li class="odd"><a href="link">Link 2</a></li>
  49. <li class="even"><a href="link">Link 3</a></li>
  50. <li class="odd"><a href="link">Link 4</a></li>
  51. <li class="even"><a href="link">Link 5</a></li>
  52. </ul>
  53.  
  54. li.even { background-color: red; }
  55. li.odd { background-color: blue; }
  56.  
  57. for ($i = 0; $i < 10; ++$i) {
  58. echo '<tr class="row' . ($i % 2) . '">...</tr>';
  59. }
  60.  
  61. $('table tr:odd').addClass('row1');
  62.  
  63. li, li + li + li, li + li + li + li + li {
  64. background-color: black;
  65. }
  66.  
  67. li + li, li + li + li + li {
  68. background-color: white;
  69. }
Add Comment
Please, Sign In to add comment