Проблема с селектором CSS

Рейтинг: 0Ответов: 2Опубликовано: 09.04.2015

Столкнулся с проблемой псевдокласса CSS :nth-of-type(3n)

Я ожидал что конструкция .item-container:nth-of-type(3n) Будет применена к каждому третьему блоку с классом item-container. Но как видно на скриншоте ниже, этот стиль применился к пятому элементу. Никаких вложенных элементов с этим классом нет.

Почему браузер считает блок <div class='clearfix'></div> вместе с <div class='item-container'></div>?

Как правильно указать селектор для каждого третьего элемента с классом item-container?

Живой пример:

.item-container:nth-of-type(3n) {
    float: right!important;
    margin-right: 0;
}
.item-container {
float:left;
width: 150px;
padding: 9px;
margin-right: 15px;
margin-bottom: 20px;
border: 1px #d7d7d7 solid;
border-radius: 3px;
}
.clearfix {clear:both;}
<div style="margin: 15px">
 <p id="mainColumnTitle">Товары для Fly Ezzy Trendy</p>
 <div class="item-container left">
   <div class="img"></div>
   <p class="item-name"><a href="/site/item?partid=78">Динамик</a></p>
   <div class="left"><b>200</b> руб</div>
   <div class="instock right">в наличии</div>
 </div>
 <div class="item-container left">
   <div class="img"></div>
   <p class="item-name"><a href="/site/item?partid=78">Динамик</a></p>
   <div class="left"><b>200</b> руб</div>
   <div class="instock right">в наличии</div>
 </div>
 <div class="item-container left">
   <div class="img"></div>
   <p class="item-name"><a href="/site/item?partid=78">Динамик</a></p>
   <div class="left"><b>200</b> руб</div>
   <div class="instock right">в наличии</div>
 </div>
 <div class='clearfix'></div>
 <div class="item-container left">
   <div class="img"></div>
   <p class="item-name"><a href="/site/item?partid=78">Динамик</a></p>
   <div class="left"><b>200</b> руб</div>
   <div class="instock right">в наличии</div>
 </div>
 <div class="item-container left">
   <div class="img"></div>
   <p class="item-name"><a href="/site/item?partid=78">Динамик</a></p>
   <div class="left"><b>200</b> руб</div>
   <div class="instock right">в наличии</div>
 </div>
 <div class="item-container left">
   <div class="img"></div>
   <p class="item-name"><a href="/site/item?partid=78">Динамик</a></p>
   <div class="left"><b>200</b> руб</div>
   <div class="instock right">в наличии</div>
 </div>
 <div class='clearfix'></div>
 <div class="item-container left">
   <div class="img"></div>
   <p class="item-name"><a href="/site/item?partid=78">Динамик</a></p>
   <div class="left"><b>200</b> руб</div>
   <div class="instock right">в наличии</div>
 </div>
 <div class="item-container left">
   <div class="img"></div>
   <p class="item-name"><a href="/site/item?partid=78">Динамик</a></p>
   <div class="left"><b>200</b> руб</div>
   <div class="instock right">в наличии</div>
 </div>
</div>

css html
Источник: Stack Overflow на русском

Ответы

Ответов пока нет.