CSS: selektor nth-of-type() i: not()?

Question

Mam pływające artykuły obok siebie o szerokości 25%. Po każdym czwartym elemencie dodam clear:both. Jednak muszę wstawić graficzny podział sekcji między elementami. I musi być wewnątrz <ul>. Aby być prawidłowym, zawinąłem "podział sekcji" (pierwszy element li w próbce pod spodem) również na <li>.

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

chcę każdy czwarty element będzie przerwa linia więc używam ...

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

Jednak chcę li.year nie wpływa to zachowanie tak próbowałem to

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

W tej chwili ostatni <li> w powyższym przykładowym kodzie jest przenoszony do następnego wiersza, ale nie powinno się to zdarzyć, ponieważ pierwszy <li> nie jest jednym z elementów pływających d artykułów, ale zawiera nagłówek.

Czy można ustawić jeden na drugim selektory :not i nth-of-type()?

Answer 1

Selektor masz -

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

- jest całkowicie poprawne (as shown by highlighting the selector).

Problem dotyczy sposobu, w jaki używasz clear. To działa, jeśli używasz clear:right, a następnie clear:left na następujący element:

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

Edycja za komentarze dotkniętego-out tekst jest nonsens. Prawdziwym problemem, jak na odpowiedź BoltClock, jest to, że pseudo-klasa :not nie wpływa na nth-of-type. Dostosowanie przesunięcia selektora działa w tym przypadku na zasadzie koincydencji, ale nie działałoby, gdyby wzór :not był inny.

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

http://jsfiddle.net/8MuCU/

Answer 2

Powodem swoje :not() nie wydaje się działać tak, ponieważ li.year jest tego samego typu elementu, jak reszta twoich li elementów (naturalnie), więc :nth-of-type(4n+1) mecze te same elementy niezależnie od klasy .year.

Nie można również sekwencyjnie układać w stos selektorów. Tak po prostu nie działają.

Ponieważ nie można zmienić elementy li do czegoś innego powodu reguł znaczników HTML i :nth-match() jest w future spec i nie został jeszcze wdrożony, trzeba zrobić z zmieniając formułę :nth-of-type() aby pomieścić strukturę zamiast:

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