0

Here is a Codepen for the problem I am trying to resolve (or simply understand): http://codepen.io/jhogue/pen/wtLiD

Basically, I have a set of columns that are floating. I want to use nth-of-type to clear a column that starts a new row. In this case, every third .column starting at the fourth. This is how I understand (3n+4) to work.

I need a header in there as well, that is the first div element. Even though I thought that nth-of-type would apply to only the elements I apply it to – in this case, elements with the class .column – it is clearly counting the first element in the container.

So, does nth-of-type just not work this way? Is my understanding of how it works incorrect?

A clear picture of what nth-of-type is supposed to do, vs. nth-child: http://css-tricks.com/the-difference-between-nth-child-and-nth-of-type/

Adrift
  • 58,167
  • 12
  • 92
  • 90
JHogue
  • 206
  • 3
  • 9

1 Answers1

0

You just need to get more creative. You may not need the heading and paragraph inside a div; but if you do need a wrapper, you could use <header> instead:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<style>

div:nth-of-type(3n+4) {
  color: red; 
}

</style>
</head>
<body>

<div class="container">
    <header>
        <h1>Testing nth-of-type.</h1>
        <p>Thought it would skip this div element.</p>
    </header>
    <div class="column">Column 1</div>
    <div class="column">Column 2</div>
    <div class="column">Column 3</div>
    <div class="column">Column 4. Want this one. </div>
    <div class="column">Column 5</div>
    <div class="column">Column 6</div>
    <div class="column">Column 7. Want this one. </div>
    <div class="column">Column 8</div>
</div>

</body>
</html>
ralph.m
  • 13,468
  • 3
  • 23
  • 30
  • But in this case, whether or not you have the `
    ` would be irrelevant - the nth `.column` is still the nth `div` within `.container`, simply because `h1` and `p` aren't `div`.
     – BoltClock Jul 31 '13 at 23:22
  • Yes, that's the whole point. The OP had a `div` in place of the `header`, but didn't want that first `div` included in the count, but it was being included in the count, because `nth-of-type` counts them all. So the idea is to change that first div to a different element, so that it won't be included in the `nth-of-type` count. That way, the right divs get colored red. – ralph.m Jul 31 '13 at 23:27