nth-child(even) example

by Kheema Pandey

HTML

<div class="container">
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="inner-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>
</div>

<div class="container">
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="inner-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>
</div>

CSS

.box {
	display: block;
	width: 100px;
	height: 30px;
	background-color: #bbbbff;
}

.container {
	float: left;
    margin-right: 10px;
}

.container > .box:nth-child(even) {
	background-color: #bb3333;
}

.container > .inner-container:nth-child(odd) > .box:nth-child(even),
.container > .inner-container:nth-child(even) > .box:nth-child(odd) {
	background-color: #bb3333;
}

.container, .inner-container {
    counter-reset: box;
}

.box::before {
    counter-increment: box;
}

.container > .box::before {
    content: 'box#' counter(box);
}

.container > .inner-container > .box::before {
    content: 'inner box#' counter(box);
}