Bootstrap / CSS: Clearfix affects even / odd index

Question

I use clearfix to prevent cracking the Bootstrap grid when I use columns of different heights.

However, as soon as a clearfix div is added to the document, the columns that appear after it in the source behave as if they have a different even / odd index than they actually do.

I created an appropriate demo . As you can see, removing the clearfix div causes the colors of the divs to change, as if their index had changed.

Do you know what could be the cause, and what can I do to fix it?

Answer 1

If you look at the nth-of-type definition , it indicates

The nth-last-of-type (an + b) pseudo-class declaration is an element that has + b-1 siblings with the same extended element name after in the tree document, for any null or positive integer value n and has a parent element . See: nth-child () pseudo-class for the syntax of its argument.

The key point here is that it points out:

same extended name element

Thus, taking it literally, the css selector is aimed at a specific element, then odd and even mapped to a specific name element, not to elements that correspond to a specific selector.

This is why replacing a div with a span will work like it will never match, since it is a different element.