Woooddd3 Woooddd3 - 5 months ago 9
CSS Question

nth-child(2n) doesn't work?

What's wrong with this code:

HTML

<div class="clearfix">
<div id="entry1">
<div class="post"></div>
</div>
<div id="entry2">
<div class="post"></div>
</div>
<div id="entry3">
<div class="post"></div>
</div>
<div id="entry4">
<div class="post"></div>
</div>
<div id="entry5">
<div class="post"></div>
</div>
<div id="entry6">
<div class="post"></div>
</div>
</div>


CSS

.post {
width: 100px;
height: 100px;
margin-right: 10px;
float: left;
background-color: #222;
}

.post:nth-child(2n) {
background-color: red;
}


FIDDLE → https://jsfiddle.net/twvxzhwm/

Why ntn-child(2n) doesn't work???

What should I do to repair that???

P.S: I cant change #entry$ → it's from CMS.
I can use only CSS or JS.

Answer

nthchild is a very specific css rule, and can be used in many ways.

For example:

My HTML:

<ul class='item-container my-class'>
    <li>item 1</li>
    <li>item 2</li>
    <li>item 3</li>
    <li>item 4</li>
    <li>item 5</li>
    <li>item 6</li>
    </ul>

Selecting the first 5 elements:

.my-class > * :nth-child(-n+5) {
    display: block;
}

Selecting the fifth element:

.my-class > * :nth-child(5) {
    display: block;
}

For more information on the nth-child selector see: http://nthmaster.com/