How does css3 count :nth-of-type items?

Question

I'm having issues with clearing margins using :nth-of-type(3n+3). If I use any div or anything it upsets the counting of items. Any ideas as to why this might be happening and what I can do to work around it?

http://jsfiddle.net/Y7G4e/

CSS

.clear{
    clear: both;
    /* overflow acts the same as clear */
    /* overflow: hidden; */
    width: 100%;
    background-color: blue;
}
div.row{
    width: 700px;
    background-color: #000;
    overflow: hidden;
}
div.one-of-three{
    width:200px;
    float: left;
    margin-right:50px;
    background-color: #ff0000;
}
.one-of-three:nth-of-type(3n+3){
    margin-right: 0;
}

HTML

<div class="row">
<div class="one-of-three">one-of-three</div>
<div class="one-of-three">one-of-three</div>
<div class="one-of-three">one-of-three</div>

<div class="clear">div divider</div>
<!-- <div>blank div does the same thing - just not as visible for debugging</div> -->

<div class="one-of-three">one-of-three</div>
<div class="one-of-three">one-of-three</div>
<div class="one-of-three">one-of-three</div>
</div>

score 3 · Accepted Answer · answered May 15 '14 at 22:42

3

The :nth-of-type pseudo class is meant for elements types - not classes. Since all of your elements are divs, there is no distinction between them because the classes are disregarded. One possible work-around would be to change the .clear element from a div to a span.

<span class="clear">rogue div divider</span>

Example Here

.clear{
    display:block;
    clear: both;
    background-color: blue;
}

Just change the element's display to block in order to make it behave as a div element.

answered May 15 '14 at 22:42

Josh Crozier

233,099
56
391
304

So you're saying that even if I targeted 'div.one-of-three:nth-of-type(3n+3)' that it still wouldn't work because they're all divs? – michael May 15 '14 at 22:49
@michael Correct. You may be interested in [this relevant question](http://stackoverflow.com/questions/6447045/css3-selector-first-of-type-with-class-name). It may be explained better there. – Josh Crozier May 15 '14 at 22:52
That's strange because if I add another item like: "div.one-of-four:nth-of-type(4n+4)" they work as well. Distinct and separate from the others. So there apparently is some attention paid to classes, I'm just not sure how much they get. – michael May 16 '14 at 00:08
4

@michael: Every simple selector applies, but each one is processed independently of all the others and the results AND'd together - if an element matches every one of them, then you have a match. div.one-of-four:nth-of-type(4n+4) matches an element that happens to match all of these conditions: 1) is a div 2) has a class called "one-of-four" 3) is :nth-of-type(4n+4). The class selector (and any other simple selector) is not considered by :nth-of-type() itself, but it is considered when matching the entire selector. – BoltClock May 16 '14 at 00:39

How does css3 count :nth-of-type items?

1 Answers1