CODEWITHSUNDEEP
htmlcss
user2125467
user2125467

Reputation: 329

How can I select odd and even elements with CSS?

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

Upvotes: 19

Views: 57603

Answers (7)

Nenad Vracar
Nenad Vracar

Reputation: 122057

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>

Upvotes: 11

Ali Zia
Ali Zia

Reputation: 3875

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;
}

Upvotes: 1

Fuzzzzel
Fuzzzzel

Reputation: 1773

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>

Upvotes: 5

DasSaffe
DasSaffe

Reputation: 2198

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.

Upvotes: 2

Fabrizio Calderan
Fabrizio Calderan

Reputation: 123397

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"] { ... }

Upvotes: 1

Vangel Tzo
Vangel Tzo

Reputation: 9313

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/

Upvotes: 3

Rounin
Rounin

Reputation: 29463

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>

Upvotes: 53

Related Questions