As an exercise in CSS styling, I have successfully transformed an unordered list into columns. But now, I am curious if it is possible to target and style the "rows" within these columns.
This is the CSS code currently in use:
ul.popular{
margin:15px 0 30px;
padding:0;
list-style:none;
-moz-columns:3;
-webkit-columns:3;
columns:3;
-moz-column-gap:0;
-webkit-column-gap:0;
column-gap:0;
list-style-position:inside;
-moz-column-fill:balance;
column-fill:balance;
-webkit-column-break-inside:avoid;
page-break-inside:avoid;
break-inside:avoid;
border-top:solid 1px #d2d3d4;
border-left:solid 1px #d2d3d4
}
ul.popular li{
padding:10px 15px;
border-bottom:solid 1px #d2d3d4;
border-right:solid 1px #d2d3d4;
display:block
}
ul.popular li a{
display:block
}
Associated HTML markup:
<ul class="popular">
<li>Australia to Fiji</li>
<li>Australia to Papua New Guinea</li>
<li>Australia to Solomon Islands</li>
<li>Australia to Tonga</li>
<li>Australia to Vanuatu</li>
<li>New Zealand to Fiji</li>
<li>New Zealand to Papua New Guinea</li>
<li>New Zealand to Solomon Islands</li>
<li>New Zealand to Tonga</li>
<li>New Zealand to Vanuatu</li>
<li>United States of America to Fiji</li>
<li>United States of America to Samoa</li>
<li>United States of America to Tonga</li>
</ul>
Link to Fiddle demonstration:
https://jsfiddle.net/cbkx1hLm/
My query lies in figuring out how to apply different background colors to every second "row." Essentially, trying to target every second item within each column.
I've experimented with nth-child(2n), variables, odd/even selectors, among others, but haven't achieved the desired outcome yet.