Question

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 inbetween the elements. And it has to be inside the <ul>. To be valid I wrapped the “section-break” (the first li item in the sample underneath) into a <li> as well.

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

I want every fourth element to be a line break so I use …

ul li:nth-of-type(4n+1) { clear: both; }

However I want the li.year not to be affected by this behaviour so I tried this

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

Right now the last <li> in my sample code above is floated into the next line but that shouldn’t happen since the first <li> isn’t one of the floated articles but contains a headline.

Is it possible to stack the :not and nth-of-type() selector onto each other?

Answer 1

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/