2012-09-10 14 views
10

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>.CSS: selektor nth-of-type() i: not()?

<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()?

Odpowiedz

6

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/

+0

Dziękuję, to działa doskonale - nawet myśli, że nie rozumiem. Jakieś wyjaśnienie na ten temat? – matt

+0

@matt szczerze, nie mam pojęcia. Wpatrywałam się w dokument MDN przez 5 minut i nadal jestem zdezorientowany. To nie ma sensu. https://developer.mozilla.org/en-US/docs/CSS/clear – McGarnagle

+1

W rzeczywistości problem wydaje się znajdować w selektorze. Zauważ, że stosujesz 'clear: left' do': nth-of-type (4n + 2) ', a nie': nth-of-type (4n + 1) 'w oryginale; twoje 'clear: right' na oryginalnym selektorze nie ma żadnego efektu, ponieważ żaden z elementów nie jest przepuszczany w prawo. – BoltClock

5

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