CSS: selector n-ésimo() y: not()?

Question

He flotado artículos uno al lado del otro que tienen un ancho del 25%. Estoy agregando un clear:both después de cada cuarto elemento. Sin embargo, necesito insertar un salto de sección gráfica entre los elementos. Y tiene que estar dentro del <ul>. Para ser válido, envolví el "salto de sección" (el primer artículo li en la muestra de abajo) en un <li> también.

<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> 

Quiero que cada cuarto elemento que es un salto de línea, así que uso ...

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

Sin embargo quiero que el li.year no ser afectado por este comportamiento por lo que probé este

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

En este momento, el último <li> en mi código de muestra anterior está flotando en la siguiente línea, pero eso no debería ocurrir ya que el primer <li> no es uno de los flotantes d artículos, pero contiene un título.

¿Es posible apilar el selector :not y nth-of-type() entre sí?

Answer 1

El selector que tiene -

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

- es perfectamente correcto (as shown by highlighting the selector).

El problema es con la forma en que usa clear. Funciona si se utiliza clear:right, y luego clear:left en el siguiente elemento:

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

Editar por los comentarios El texto de salida afectada no tiene sentido. El verdadero problema, según la respuesta de BoltClock, es que la pseudoclase :not no afecta a nth-of-type. El ajuste de la compensación del selector funciona en este caso por coincidencia, pero no funcionaría si el patrón :not fuera diferente.

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

http://jsfiddle.net/8MuCU/

Answer 2

La razón de su :not() no parece funcionar es porque el li.year es del mismo tipo de elemento como el resto de sus elementos li (naturalmente), por lo :nth-of-type(4n+1) coincide con los mismos elementos, independientemente de la clase .year.

No es posible apilar los selectores secuencialmente tampoco. Así no es cómo funcionan.

Puesto que usted no puede cambiar sus li elementos a otra cosa debido a las reglas de marcado HTML, y es :nth-match() en un future spec y no se ha aplicado, sin embargo, usted tiene que conformarse con el cambio de la fórmula :nth-of-type() para dar cabida a la estructura en su lugar:

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