ansaurus

Question

Answer 1

A:

If you want a checkerboard, then use:

ul li:nth-child(8n+1), ul li:nth-child(8n+3), ul li:nth-child(8n+6), ul li:nth-child(8n+8) {
    background-color:#ececec;
}

The pattern repeats every two rows, which in your case is every 8 elements, so you need 8n in the selector. And of those eight, you want the 0th, 2nd, 5th and 7th to have the alternate color.

EDIT: I tried this HTML, and got a checkerboard in Firefox 3.5.9:

<html>
<head>
<style>
#container {
    width: 960px;
    border: 1px solid black;
}
span {
    border: 1px solid gray;
    display: block;
    width: 180px;
    float: left;
    padding: 10px;
    margin: 10px;
    background: blue;
}
span:nth-child(8n+1), span:nth-child(8n+3), span:nth-child(8n+6), span:nth-child(8n+8) {
    background: red;
}
</style>
<body>
<div id='container'>
    <span>One</span>
    <span>Two</span>
    <span>Three</span>
    <span>Four</span>
    <span>Five</span>
    <span>Six</span>
    <span>Seven</span>
    <span>Eight</span>
    <span>Nine</span>
    <span>Ten</span>
    <span>Eleven</span>
    <span>Twelve</span>
    <span>Thirteen</span>
    <span>Fourteen</span>
    <span>Fifteen</span>
    <span>Sixteen</span>
    <span>Seventeen</span>
    <span>Eighteen</span>
</div>

Ned Batchelder 2010-04-20 21:27:43

Counter-intuitively, `nth-child` is 1-based.

bobince 2010-04-20 21:31:47

cant seem to get this to work. still loads the exact same. gonna give it a few more tries

JCHASE11 2010-04-20 21:44:53

i have tried both suggestions with every possible combination and its still not working...any ideas?

JCHASE11 2010-04-20 21:47:39

@bobince, thanks, I've changed the numbers to be 1-based. @JCHASE, I've added sample code.

Ned Batchelder 2010-04-21 00:39:07

thanks, that did it

JCHASE11 2010-04-21 03:07:34

ansaurus

tags:

views:

answers:

css3 nth child question

related questions