CSS: nth-of-type() und: nicht() selector?

Question

Ich habe Artikel nebeneinander schweben, die 25% breit sind. Ich füge ein clear:both nach jedem vierten Element hinzu. Ich muss jedoch einen grafischen Schnitt einfügen zwischen den Elementen einfügen. Und es muss innerhalb der <ul> sein. Um gültig zu sein, habe ich den "section-break" (das erste li-Item in der darunterliegenden Probe) in eine <li> verpackt.

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

Ich will jedes vierte Element ein Zeilenumbruch sein, damit ich ...

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

Allerdings möchte ich die li.year von diesem Verhalten nicht betroffen sein, damit ich diese

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

versucht

Im Moment ist die letzte <li> in meinem obigen Beispielcode in die nächste Zeile floated, aber das sollte nicht passieren, da die erste <li> nicht eine der Floate ist d Artikel, enthält jedoch eine Überschrift.

Ist es möglich, die :not und nth-of-type() Selektor aufeinander zu stapeln?

Answer 1

Der Selektor Sie haben -

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

- vollkommen richtig ist (as shown by highlighting the selector).

Das Problem ist, wie Sie clear verwenden. Es funktioniert, wenn Sie clear:right verwenden, und dann clear:left auf dem folgende Elemente:

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

bearbeitet pro Kommentar Der geschlagenen-outen Text ist Unsinn. Das eigentliche Problem laut BoltClocks Antwort ist, dass die :not Pseudoklasse keinen Einfluss auf nth-of-type hat. Das Anpassen des Selektor-Offsets funktioniert in diesem Fall durch Zufall, würde aber nicht funktionieren, wenn das Muster :not anders wäre.

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

http://jsfiddle.net/8MuCU/

Answer 2

Der Grund Ihrer :not() nicht zu funktionieren scheinen, weil die li.year des gleichen Elements Typ wie der Rest Ihres li Elemente ist (natürlich), so entspricht :nth-of-type(4n+1) die gleichen Elemente, unabhängig von der .year Klasse.

Es ist auch nicht möglich, Selektoren sequenziell zu stapeln. So funktionieren sie nicht.

Da Sie nicht Ihre li Elemente zu etwas anderem wegen HTML-Markup-Regeln ändern können, und :nth-match() ist in einem future spec und wurde noch nicht umgesetzt, müssen Sie mit dem Ändern :nth-of-type() Formel machen tun, um die Struktur anzupassen statt:

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