1

According to this article: http://css-tricks.com/how-nth-child-works/ the nth-child selector should work different.

In my case I have to use .drag_box:nth-child(3n+2){} to select every third div but normally it should just be .drag_box:nth-child(3n){}. How come? Here is the fiddle:

http://jsfiddle.net/6bRY7/2/

Here the Code:

HTML:

<div id="content_box_search">
   <label>
      <input type="text" class="search" name="word"/>
      <span class="search-icon"></span>                     
   </label>
</div>
<div id="search_go">Go</div>
<div id="content_box_upload"> upload </div>
<div style="clear: both; height: 20px;"></div>



<div class="drag_box"></div>
<div class="drag_box"></div>
<div class="drag_box"></div>
<div class="drag_box"></div>
<div class="drag_box"></div>
<div class="drag_box"></div>
<div class="drag_box"></div>
<div class="drag_box"></div>
<div class="drag_box"></div>
<div class="drag_box"></div>
<div class="drag_box"></div>

Javascript:

$(document).ready(function () {
    $('#search_go').hide();
    $('.search').bind('input', function () {
        if ($(this).val()) {
           $('#search_go').fadeIn(1000);
        }
        else {
           $('#search_go').fadeOut(1000);
       }
   });
});

CSS:

.drag_box{
    position: relative;
    float: left;
    width:30%;
    height: 30px;
    background-color:#ccc;
    margin-right:5%;
    margin-bottom:10px;
}

/* .drag_box:nth-child(3n+1){ */

.drag_box:nth-child(3n+2){
    margin-right: 0; }

#content_box_search{
    float: left; }

#search_go{
    float: left;
    font-size: 12px;
    margin-left: 10px;
    background-color: #dedede;
    color: #646464;
    cursor: pointer;
    height: 25px;
    line-height: 25px;
    text-align: center;
    width: 50px;      }

#content_box_upload{
    float: right;
    width: 200px;
    height: 25px;
    line-height: 25px;
    text-align: center;
    background-color: #dedede;
    color: #646464;
    cursor: pointer;
     }
j08691
  • 204,283
  • 31
  • 260
  • 272
user2718671
  • 2,866
  • 9
  • 49
  • 86

1 Answers1

2

Because all the child elements of the parent element count as children (which are then counted as ns), not just the ones with the matching class name.

Quentin
  • 914,110
  • 126
  • 1,211
  • 1,335