How can I select odd and even elements with CSS? - html

Question

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

Answer 1

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>

Answer 2

You can do this using nth-child() with Even and odd rules.
.box:nth-child(odd) {
background: blue;
}
.box:nth-child(even) {
background: green;
}
<div class="box">Lorem ipsum dolor sit amet.</div>
<div class="box">Lorem ipsum dolor sit amet.</div>
<div class="box">Lorem ipsum dolor sit amet.</div>
<div class="box">Lorem ipsum dolor sit amet.</div>
Or you can can do this where :nth-child(2n) represents the even and :nth-child(2n+1) represents the odd
.box:nth-child(2n) {
background: red;
}
.box:nth-child(2n+1) {
background: yellow;
}
<div class="box">Lorem ipsum dolor sit amet.</div>
<div class="box">Lorem ipsum dolor sit amet.</div>
<div class="box">Lorem ipsum dolor sit amet.</div>
<div class="box">Lorem ipsum dolor sit amet.</div>

Answer 3

You're looking for nth-child(odd) and nth-child(even), If you don't want to apply .box classname.
[class^="box-"]:nth-child(odd) {
color:#000;
}
[class^="box-"]:nth-child(even) {
color:#fff;
}
An example: https://jsfiddle.net/8tkcuuwm/

Answer 4

To get this working you need a container of which you can adress the odd and even children like this. You set the class to the container and Format it's children accordingly.
By this you only have to set the class once and can exchange it if needed, without having to modify each child separately:
<style type="text/css">
.container div:nth-child(odd) {
color:#F00;
}
.container div:nth-child(even) {
color:#00F;
}
</style>
<div class="container">
<div class="box-1">Lorem ipsum dolor sit amet.</div>
<div class="box-2">Lorem ipsum dolor sit amet.</div>
<div class="box-3">Lorem ipsum dolor sit amet.</div>
<div class="box-4">Lorem ipsum dolor sit amet.</div>
</div>

Answer 5

See this jsfiddle:
HTML
<div class="box box-1">Hello World</div>
<div class="box box-2">Hello World</div>
<div class="box box-3">Hello World</div>
<div class="box box-4">Hello World</div>
CSS
.box:nth-child(odd) {
background-color: #336699;
}
.box:nth-child(even) {
background-color: #222;
}
Short explaination:
We added another class to the boxes, called box. This is, so we can refer to every element of this type. (My hint: use ID's for the box-1, box-2 stuff, since they appear to be unique).
Using the pseudo-class nth-child in combination with odd or even, will affect every (as you may assume) odd- or even element.

Answer 6

if colours should alternate depending only on the order of the div elements, (no matter the class name) then you could use div:nth-child(2n) and div:nth-child(2n + 1)
On the contrary if it depends only on the last digit of your class name (no matter if your divs are in the right order) then you could write
[class^="box"][class$="2"],
[class^="box"][class$="4"],
[class^="box"][class$="6"],
[class^="box"][class$="8"],
[class^="box"][class$="0"] { ... }
[class^="box"][class$="1"],
[class^="box"][class$="3"],
[class^="box"][class$="5"],
[class^="box"][class$="7"],
[class^="box"][class$="9"] { ... }

Answer 7

Use nth-child in order to achieve this.
HTML
<div class="box"></div>
<div class="box"><div>
<div class="box"></div>
<div class="box"></div>
CSS
.box:nth-child(odd) {
background-color: #000;
}
.box:nth-child(even) {
background-color: #FFF;
}