How to add alternate row color to a CSS class

Question

How would I add alternate row color to this class:

.widget li { 
       border: none; padding: 14px 0 0px; 
}

I see instructions like these:

https://www.w3.org/Style/Examples/007/evenodd.en.html

Alternate table row color using CSS?

https://www.sitepoint.com/premium/books/the-css3-anthology-4th-edition/preview/how-do-i-display-table-rows-in-alternating-colors-4bcb9a2

But this seems more complicate than that. Can you help?

Thanks!

score 0 · Answer 1 · edited Oct 21 '16 at 13:06

0

use like this

.widget li:nth-child(even){
       background: #CCC
 }

.widget li:nth-child(odd){
       background: #000
 }

edited Oct 21 '16 at 13:06

chirag satapara

1,947
1
15
26

answered Oct 21 '16 at 12:32

parag parmar

148
6

score 0 · Answer 2 · answered Oct 21 '16 at 12:37

0

It is unclear whether you want alternate text-colors on li elements or divs with class widget. If you mean the latter then try the following:

.widget {
  color: myoddcolr;
}

.widget:nth-of-type(odd) {
  color: myoddcolr;
}

answered Oct 21 '16 at 12:37

user31782

7,087
14
68
143

I think it's quite clear he wants to target `li`, as that's what his CSS is showing – Lee Oct 21 '16 at 12:50
As a non native English speaker I couldn't decipher what (s)he meant. `.widget li` isn't a class. And usually `li` elements are not taken as rows -- cf. the row col grid system – user31782 Oct 21 '16 at 13:15
I get that, but seeing as he's talking about widgets, it's fair to assume each `li` will be a widget block, which could be a row in a column... Plus he wants alternating 'rows', which would make sense if you have a bunch of `li` items. – Lee Oct 21 '16 at 13:21
@Lee Yes you are right. OP is using `widget` on `ul`. `widget` is column and the the `li`s are rows. – user31782 Oct 21 '16 at 13:29

score 0 · Answer 3 · answered Oct 21 '16 at 12:59

You can use like this :nth-child(2n+1). I hope this will help you!

.widget {
  padding-left: 0px;
 }
 .widget li{
  margin-top: 1px;
  padding: 5px;
 }
 .widget li:nth-child(2n+1){
  background: #ccc;
 }
 .widget li:nth-child(2n+2){
  background: #eee;
 }

<ul class="widget">
 <li>Row - 1</li>
 <li>Row - 2</li>
 <li>Row - 3</li>
 <li>Row - 4</li>
 <li>Row - 5</li>
 <li>Row - 6</li>
</ul>

How to add alternate row color to a CSS class

3 Answers3