CSS nth-child apply odd-even rule but switch every

问题:

I have a list of divs that appear 4 in a row with a class and I would like to create a checkerboard background style, meaning:

• Apply a different background color for odd and even divs
• Switch the odd-even to even-odd for each line

I've tried this

.boxwrapper:nth-child(2n-1), .boxwrapper:nth-child(2n) {
    background:#ff0000;
}
.boxwrapper:nth-child(4n-2), .boxwrapper:nth-child(4n-3) {
    background:#0000ff;
}

and it works fine for odd-even divs but cant get it to switch every 4 items. I'm headaching over the 4n-1, 4n+1 stuff, if I could get that right voila!

The result should look like this:

回答1:

Demo

http://jsfiddle.net/mykhA/1/

HTML

<div class="container">
    <div class="box"></div><div class="box"></div><div class="box"></div><div class="box"></div>
    <div class="box"></div><div class="box"></div><div class="box"></div><div class="box"></div>
    <div class="box"></div><div class="box"></div><div class="box"></div><div class="box"></div>
    <div class="box"></div><div class="box"></div><div class="box"></div><div class="box"></div>
</div>​

CSS

.container {
    width: 100px;
    height: 100px;
}

.line {
    width: 100px;
    height: 25px;
}

.box {
    width: 25px;
    height: 25px;
    float: left;
}

.box:nth-child(8n+2) {
    background-color: red;
}

.box:nth-child(8n+4) {
    background-color: red;
}
.box:nth-child(8n+5) {
    background-color: red;
}

.box:nth-child(8n+7) {
    background-color: red;
}

.box:nth-child(8n+1) {
    background-color: blue;
}

.box:nth-child(8n+3) {
    background-color: blue;
}

.box:nth-child(8n+6) {
    background-color: blue;
}

.box:nth-child(8n) {
    background-color: blue;
}
​

​

回答2:

Just after the solution from @Miszy, I also found a jQuery solution that does the same thing regardless of how many divs will appear on the page:

$(document).ready(function() {
    $(.boxwrapper:nth-child(8n+3), .boxwrapper:nth-child(8n+5), .boxwrapper:nth-child(8n+8), .boxwrapper:nth-child(8n+10)").css({"background-color":"red"});
});

Either one will work fine.

回答3:

You may also use only 4 selectors to switch the background-color. (answer similar to @MichałMiszczyszyn => shorter approach)

The repeating pattern goes on 2 rows of 4 elements, the choice of :nth-child(8n) is indeed the basic pattern to work on, example :

:nth-child(8n-1),
:nth-child(8n-3),
:nth-child(8n-6),
:nth-child(8n-12){
background:/* switch to the other value here */;
}

.square {
  width:25%;
  margin:auto;
  background:turquoise;
  counter-reset:div;
  overflow:hidden; /* to deal with float */
}

.square div {
  float:left;
  width:25%;
  text-align:center;
  background:green;
}
.square div:nth-child(8n-1),
.square div:nth-child(8n-3),
.square div:nth-child(8n-6),
.square div:nth-child(8n-12){
background:tomato;
}

/* demo purpose */
body:hover div div {
background:initial;/* resets to none to show parents background */
}
.square div:before {
  content:'';
  padding-top:100%;
  display:inline-block;
  vertical-align:middle;
}
.square div:after {
  counter-increment:div;
  content:counter(div);
  display:inline-block;
  vertical-align:middle;
  font-size:2vw;
}

<div class="square">
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</div>
<hr/>
<div class="square">
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</div>

The pattern will repeat itself every 8 elements.

Notice that you can spare the initial background-color of squares and use the parent background.