I have floated articles side by side that are 25% wide. I\'m adding a clear:both
after every fourth element. However I need to insert a graphical section-break inbe
The selector you have --
ul li:not(.year):nth-of-type(4n+1) { background: yellow; }
-- is perfectly correct (as shown by highlighting the selector).
The issue is with how you're using clear
. It works if you use clear:right
, and then clear:left
on the following element:
ul li:not(.year):nth-of-type(4n+1) { clear: right; }
ul li:not(.year):nth-of-type(4n+2) { clear: left; }
Edit per comments The stricken-out text is nonsense. The real issue, as per BoltClock's answer, is that the :not
pseudo-class doesn't affect nth-of-type
. Adjusting the selector offset works in this case by coincidence, but would not work if the :not
pattern was different.
ul li:not(.year):nth-of-type(4n+2) { clear: left; }
http://jsfiddle.net/8MuCU/
The reason your :not()
doesn't appear to work is because the li.year
is of the same element type as the rest of your li
elements (naturally), so :nth-of-type(4n+1)
matches the same elements regardless of the .year
class.
It's not possible to stack selectors sequentially either. That's just not how they work.
Since you can't change your li
elements to something else because of HTML markup rules, and :nth-match()
is in a future spec and hasn't been implemented yet, you have to make do with changing your :nth-of-type()
formula to accommodate the structure instead:
ul li:not(.year):nth-of-type(4n+2) { clear: both; }