Styling with nth-child

Question

То, что я пытаюсь выполнить, состоит в том, что первые два раздела являются белыми, а затем два серых раздела, затем этот шаблон продолжается.

Я сделал jsfiddle, чтобы показать, что я до сих пор: jsfiddle

CSS:

section{ 
     float:left; 
     width:40%; 
     background:#ccc; 
     padding:20px 25px; 
     margin-bottom:2px 
} 
section:nth-child(even){ 
     margin-left:2px; 
} 
section:nth-child(1), 
section:nth-child(2n+2){ 
     background:#fff; 
} 

HTML:

<section></section> 
<section></section> 
<section></section> 
<section></section> 
<section></section> 
<section></section> 
<section></section> 
<section></section> 

я должен был бы использовать другой :nth-child(), чтобы сделать эту работу правильно? Или было бы лучше использовать jquery?

PHP используется для создания этих полей, так что лучший подход к php-методу? Может быть, классы?

Answer 1

Nth-ребенок, что вы хотите, но то, что вы ищете, как это:

http://tinker.io/f5c5c

section:nth-child(4n+1), 
section:nth-child(4n+2){ 
     /* styles here */ 

} 

Answer 2

Попробуйте это:

section { 
    float:left; 
    width:40%; 
    background:#fff; 
    padding:20px 25px; 
    margin-bottom:2px 
} 
section:nth-child(even) { 
    margin-left:2px; 
} 
section:nth-child(4n),section:nth-child(4n-1) { 
    background:#ccc; 
} 

jsFiddle example