Возможно ли обойтись без скрипта?

[Светлана Г.]

Есть сайт. Под меню Расширенный поиск.

Задача состоит в том, чтобы у каждого 4 блока со свойствами товара (пол, бренд, возраст, ...) обнулить margin.

 

Я написала такое правило, но оно не работает как надо:

.search_gW .widget-meta-data-filter .mdf_input_container:not(.mdf_section_tax_product_cat):nth-of-type(4n){	margin-right:0 !important;}

Это правило некорректное?

Возможно ли это сделать без js?

[Bassline]

Зачем такие заморочки. Сделай по принципу сетки Bootstrap. Все блокам margin: 0 35px или padding, а родителю margin: 0 -35px;

Edited March 3, 2015 by Bassline

[Q4Dizzy]

http://jsfiddle.net/0rc5tjr1/

[Светлана Г.]

Зачем такие заморочки. Сделай по принципу сетки Bootstrap. Все блокам margin: 0 35px или padding, а родителю margin: 0 -35px;

Это первое, что я пробовала, но почему-то не получилось - появлялась прокрутка. Это именно из-за 35px, Если ставила 15px - было нормально. Не понятно почему даже.

[Светлана Г.]

http://jsfiddle.net/0rc5tjr1/

Спасибо большое! Сработало! Я поменяла порядок следования псевдоклассов и вместо (4n) прописала (4n+1). 

.search_gW .widget-meta-data-filter .mdf_input_container:nth-child(4n+1):not(.mdf_section_tax_product_cat)

А почему (4n+1)?

[mrnobody]

Вот у нас например 20 дивов. Нужно залить их фоном по формуле 4n+1.

Вместо n подставляем цифры по порядку начиная с нуля:

       4 × n + 10  =>  4 × 0 + 1 = 0  + 1 = 11  =>  4 × 1 + 1 = 4  + 1 = 52  =>  4 × 2 + 1 = 8  + 1 = 93  =>  4 × 3 + 1 = 12 + 1 = 134  =>  4 × 4 + 1 = 16 + 1 = 175  =>  4 × 5 + 1 = 20 + 1 = 216  =>  4 × 6 + 1 = 24 + 1 = 25

Следовательно зальются дивы — 1, 5, 9, 13, 17.

21, 25 … — их не существует

http://jsbin.com/yixexenele/1/edit?css,output

Edited March 4, 2015 by mrnobody

[Светлана Г.]

 

Вот у нас например 20 дивов. Нужно залить их фоном по формуле 4n+1.

Вместо n подставляем цифры по порядку начиная с нуля:

       4 × n + 10  =>  4 × 0 + 1 = 0  + 1 = 11  =>  4 × 1 + 1 = 4  + 1 = 52  =>  4 × 2 + 1 = 8  + 1 = 93  =>  4 × 3 + 1 = 12 + 1 = 134  =>  4 × 4 + 1 = 16 + 1 = 175  =>  4 × 5 + 1 = 20 + 1 = 216  =>  4 × 6 + 1 = 24 + 1 = 25

Следовательно зальются дивы — 1, 5, 9, 13, 17.

21, 25 … — их не существует

http://jsbin.com/yixexenele/1/edit?css,output

 

Поняла! Спасибо за подробнейшее объяснение . Точно, я не учла, что здесь нумерация начинается с нуля.