Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

CSS :nth-of-type() and :not() selector?

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?

like image 996
matt Avatar asked Sep 10 '12 16:09

matt


People also ask

What's the difference between the nth-of-type () and Nth child () selector?

As a general rule, if you want to select an interval of a selector regardless of the type of element it is, use nth-child . However, if you want to select a specific type only and apply an interval selection from there, use nth-of-type .

How do you access the CSS selector using the nth element?

The :nth-of-type(n) selector matches every element that is the nth child, of the same type (tag name), of its parent. n can be a number, a keyword (odd or even), or a formula (like an + b). Tip: Look at the :nth-child() selector to select the element that is the nth child, regardless of type, of its parent.

How do you select odd nth type in CSS?

:nth-of-type(2n+1) /* represents every odd elements that has the same expanded element name */ :nth-of-type(odd) /* same, represents every odd elements that has the same expanded element name */ :nth-of-type(10n-1) /* represents the 9th, 19th, 29th, etc, elements that has the same expanded element name */

What is nth-of-type CSS?

The :nth-of-type selector allows you select one or more elements based on their source order, according to a formula. It is defined in the CSS Selectors Level 3 spec as a “structural pseudo-class”, meaning it is used to style content based on its relationship with parent and sibling elements.


2 Answers

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/

like image 80
McGarnagle Avatar answered Oct 25 '22 04:10

McGarnagle


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; }
like image 39
BoltClock Avatar answered Oct 25 '22 04:10

BoltClock