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()
?
Dziękuję, to działa doskonale - nawet myśli, że nie rozumiem. Jakieś wyjaśnienie na ten temat? – matt
@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
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