CSS: selettore nth-of-type() e: not()?

Question

Ho flottato articoli affiancati larghi del 25%. Sto aggiungendo un clear:both dopo ogni quarto elemento. Tuttavia ho bisogno di inserire un'interruzione di sezione grafica tra gli elementi. E deve essere all'interno dello <ul>. Per essere valido ho avvolto la "interruzione di sezione" (la prima voce di li nell'esempio in basso) in uno <li> pure.

<ul> 
    <li class="year"><h1>THIS IS A SECTION Break and 100% wide</h1></li> 
    <li>This is a article and only 25% wide</li> 
    <li>This is a article and only 25% wide</li> 
    <li>This is a article and only 25% wide</li> 
    <li>This is a article and only 25% wide</li> 
</ul> 

Voglio che ogni quarto elemento per essere un'interruzione di linea per cui uso ...

ul li:nth-of-type(4n+1) { clear: both; } 

Tuttavia voglio il li.year di non essere colpiti da questo comportamento così ho provato questo

ul li:not(.year):nth-of-type(4n+1) { clear: both; } 

In questo momento l'ultimo <li> nel mio codice di esempio sopra è flottato nella riga successiva ma ciò non dovrebbe accadere dal momento che il primo <li> non è uno dei floate d articoli ma contiene un titolo.

È possibile impilare i selettori :not e nth-of-type() l'uno sull'altro?

Answer 1

Il selettore che hai -

ul li:not(.year):nth-of-type(4n+1) { background: yellow; } 

- è perfettamente corretto (as shown by highlighting the selector).

Il problema riguarda il modo in cui si utilizza clear. Funziona se si utilizza clear:right, e poi clear:left sul seguente elemento:

ul li:not(.year):nth-of-type(4n+1) { clear: right; } 
ul li:not(.year):nth-of-type(4n+2) { clear: left; } 

Modifica per commenti Il testo colpita-out è una sciocchezza. Il vero problema, come da risposta di BoltClock, è che la pseudo-classe :not non ha effetto su nth-of-type. La regolazione dell'offset del selettore funziona in questo caso per coincidenza, ma non funzionerebbe se il pattern :not fosse diverso.

ul li:not(.year):nth-of-type(4n+2) { clear: left; } 

http://jsfiddle.net/8MuCU/

Answer 2

Il motivo per il vostro :not() non sembra funzionare è perché la li.year è dello stesso tipo di elemento come il resto dei tuoi li elementi (naturalmente), in modo :nth-of-type(4n+1) partite gli stessi elementi indipendentemente dalla classe .year.

Non è possibile raggruppare sequenzialmente i selettori. Questo non è solo il modo in cui funzionano.

Dal momento che non è possibile modificare le li elementi a qualcos'altro a causa delle regole di markup HTML e :nth-match() è in una future spec e non è stato ancora implementato, bisogna accontentarsi di cambiare il vostro :nth-of-type() formula per accogliere la struttura invece:

ul li:not(.year):nth-of-type(4n+2) { clear: both; }