Issue
Say I have some divs:
<div class="box-1"></div>
<div class="box-2"></div>
<div class="box-3"></div>
<div class="box-4"></div>
If these boxes need to be alternate colours I need to create some CSS which basically does the following:
.box-(odd-number) {
color:#000;
}
.box-(even-number) {
color:#fff;
}
Obviously I know the above is not the correct syntax. Could some one point me in the right direction?
Thanks
Solution
You can use the nth-of-type
pseudo-class, combined with the keywords odd
and even
:
.box:nth-of-type(odd) {
background-color:#000;
}
.box:nth-of-type(even) {
background-color:#fff;
}
.box {
display: inline-block;
width: 100px;
height: 100px;
border: 1px solid #f00;
}
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
Answered By - Rounin - Standing with Ukraine
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.