Div odd and even

Question

I have a problem that I believe has a simple fix, I just don't know how to fix it.

Let's say I have some divs ie

<div class="box-1"></div>
<div class="box-2"></div>
<div class="box-3"></div>
<div class="box-4"></div>

and etc.

If these fields should be alternating colors. I need to create some css that basically does the following:

.box-(odd-number) {
    color:#000;
}
.box-(even-number) {
    color:#fff;
}

Obviously, I know that this is not the correct syntax. Can someone point me in the right direction.

thanks

Answer 1

You can use the class pseudo-class nth-of-typein combination with keywords oddand 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>

Run codeHide result

Answer 2

You can do this using nth-child()c 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>

Run codeHide result

, :nth-child(2n) :nth-child(2n+1)

.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>

Hide result

Answer 3

nth-child(odd) nth-child(even), .box .

[class^="box-"]:nth-child(odd) {
    color:#000;
}
[class^="box-"]:nth-child(even) {
    color:#fff;
}

: https://jsfiddle.net/8tkcuuwm/

Answer 4

div ( ), div:nth-child(2n) div:nth-child(2n + 1)

, ( , div ),

[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 5

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

:

, box. , . ( : ID box-1, box-2, ). pseudo-class nth-child ( ) ,

Answer 6

, , . .

, , , :

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

Use nth-childto 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;
}