Creating Check Pattern with nth-child - css

Question

I'm trying to make a checkerboard pattern using nth-child, but it isn't working the way I expected it to.
In the example below, I want to set every other p at opposite sides of the div to create a checkerboard pattern. The p are set to width:50%;, and the div is set at width:100%.
I've set up a jsfiddle to demonstrate:
HTML
<div id='check'>
<p>Odd</p>
</div>
<div id='check'>
<p>Even</p>
</div>
CSS
#check {
float:left;
width: 100%;
}
#check p {
width: 50%;
background: #DDD;
}
#check p:nth-child(odd) {
float:right;
}
Can someone make me see how to make this work?

Answer 1

You need to keep all the p elements together in a single div, as the nth-child is based off the parent container. Here is a modified fiddle.. It uses this code:
HTML
<div id ='check'>
<p>Odd</p>
<p>Even</p>
<p>Odd</p>
<p>Even</p>
</div>
CSS
#check {
float:left;
width: 100%;
}
#check p {
width: 50%;
background: #DDD;
clear:both;
}
#check p:nth-child(odd) {
float:right;
}
#check p:nth-child(even) {
float:left
}

Answer 2

Can't have 2 elements using the same id. I believe you want to switch to using classes.
Created a fiddle to demonstrate http://jsfiddle.net/wE6e4/
#checkerboard {
width: 500px;
}
.check {
float:left;
width: 100px;
height: 100px;
}
.check:nth-child(odd) {
background: #DDD;
}
.check:nth-child(even) {
background: #fff;
}

Answer 3

First, you're using an ID multiple times - ID's should be unique. Besides that, the line
#check p:nth-child(odd) means that you want to set the given rules for every odd p child of #check, which is not what you want. You want to make every odd .check (I took the liberty to change the ID's to a class). So you should put them in a container and say:
#cont .check:nth-child(odd) {
float:right;
}
Here's the fiddle:
http://jsfiddle.net/Wbnks/

Answer 4

If you're trying to minimize your CSS, you can try something like this:
HTML:
<div class="checkerboard">
<p>1</p>
<p>2</p>
<p>3</p>
<p>4</p>
<p>5</p>
<p>6</p>
<p>7</p>
<p>8</p>
<p>9</p>
<p>10</p>
</div>
CSS:
.checkerboard p {
float: left;
width: 50%;
}
.checkerboard p:nth-child(4n-2), .checkerboard p:nth-child(4n-1) {
background-color: #999;
}
http://jsfiddle.net/L9ng7/5/