Я разместил статьи рядом, которые имеют ширину 25%. Я добавляю clear:both
после каждого четвертого элемента. Однако мне нужно вставить графический раздел-разрыв между элементами. И он должен находиться внутри <ul>
. Чтобы быть действительным, я обернул "раздел-перерыв" (первый элемент li в образце внизу) в <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>
Я хочу, чтобы каждый четвертый элемент был разрыв строки, поэтому я использую...
ul li:nth-of-type(4n+1) { clear: both; }
Однако я хочу, чтобы li.year
не подвергался воздействию этого поведения, поэтому я попробовал это
ul li:not(.year):nth-of-type(4n+1) { clear: both; }
В настоящий момент последний <li>
в моем примере кода выше переносится в следующую строку, но это не должно происходить, поскольку первый <li>
не является одним из плавающих статей, но содержит заголовок.
Можно ли установить селектор :not
и nth-of-type()
друг на друга?