Выбор каждого 4-го

у меня есть длинная линия DIVs, и мне нужно изменить заполнение на каждом 4-м DIV с помощью селектора nth-child, но у меня возникли проблемы с его работой вообще.

вот мой css:

.content_tab {
    width: 220px;
    height: 340px;
    margin-right: 20px;
    margin-bottom: 20px;
    float: left;
    background-color: #0F0;
}
.content_tab:nth-child(4){
    background-color: #F00;
    margin-right: 0px;
}

и вот мой HTML:

<div class="content">
    <div class="content_tab"></div>
    <div class="content_tab"></div>
    <div class="content_tab"></div>
    <div class="content_tab"></div>
    <div class="content_tab"></div>
    <div class="content_tab"></div>
    <div class="content_tab"></div>
</div>

какие идеи?

9
css css-selectors html

3 ответов

вы должны изменить 

.content_tab:nth-child(4){

до 

.content_tab:nth-child(4n){

как объяснено здесь http://css-tricks.com/how-nth-child-works/

или если вы не хотите, чтобы первый div, чтобы быть выбранным, нужно 

.content_tab:nth-child(4n+4){
28
.content div:nth-child(4n) {  /* selects 4, 8, 12, 16, etc. */
    padding: 10px;
}

http://jsfiddle.net/y6vfg/1/

или если вы хотите, чтобы каждый четвертый элемент начинался с первый вы можете использовать:

.content div:nth-child(4n + 1) { /* selects 1, 5, 9, 13 .. */
    padding: 10px;
}

http://jsfiddle.net/y6vfg/7/

8

чтобы получить каждый 4-й элемент в селекторе, используйте 4n

.content_tab:nth-child(4n){
    background-color: #F00;
    margin-right: 0px;
}

пример скрипку

Примечание я сделал размеры div меньше в скрипке, поэтому было легче увидеть, как он работает.

4