CSS: селектор nth-of-type() и: not()?

Я разместил статьи рядом, которые имеют ширину 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() друг на друга?

Ответы

Ответ 1

Селектор, который у вас есть -

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

- совершенно правильно (как показано, выделив селектор).

<ы > Проблема заключается в том, как вы используете clear. Он работает, если вы используете clear:right, а затем clear:left для следующего элемента:

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

Редактировать в комментариях Исчерпанный текст - глупость. Реальная проблема, по ответам BoltClock, заключается в том, что псевдокласс класса :not не влияет на nth-of-type. Настройка смещения селектора работает в этом случае по совпадению, но не работает, если шаблон :not отличается.

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

http://jsfiddle.net/8MuCU/

Ответ 2

Причина, по которой ваш :not() не работает, заключается в том, что li.year имеет тот же тип элемента, что и остальные ваши элементы li (естественно), поэтому :nth-of-type(4n+1) соответствует тем же элементам, независимо от того, класс .year.

Невозможно также последовательно селектировать селектора. Это просто не то, как они работают.

Поскольку вы не можете изменить свои элементы li на что-то другое из-за правил разметки HTML, а :nth-match() находится в будущей спецификации и еще не реализован, вам нужно будет изменить формулу :nth-of-type(), чтобы разместить структуру:

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