0

The problem is that news4 div is 30% wide. It has to be 50%. It looks like nth-of-type also counts .advertisement div and news4 div becomes fifth child element. The same is with nth-of-type and nth-child. My html example is:

<div class="container">
    <div class="news">news1</div>
    <div class="news">news2</div>
    <div class="news">news3</div>
    <div class="advertisement">Advertisement</div>
    <div class="news">news4</div>
    <div class="news">news5</div>
    <div class="news">news6</div>
</div>

And the css:

.container { width: 100%; }
.news:nth-of-type(3n+1) { width: 50%; }
.news:nth-of-type(3n+2) { width: 30%; }
.news:nth-of-type(3n+3) { width: 20%; }
Ramūnas Pabrėža
  • 584
  • 1
  • 5
  • 14
  • 1
    Yes, the `nth-child` always selects nth child under the parent (and not nth child with a specific class). Similarly `nth-of-type` always selects the nth element of a certain type under the parent (and not the nth element of type with a certain class). – Harry Mar 07 '16 at 14:57
  • Here's a detailed explanation and possible workaround options: http://stackoverflow.com/a/32380418/3597276 – Michael Benjamin Mar 07 '16 at 15:05

1 Answers1

1

nth-of-type refers to the element tag (div) not the class name (.news).

If you want to target the .news item after .advertisement you might consider the following selector:

.advertisement + .news { width: 50%; }
jeffjenx
  • 17,041
  • 6
  • 57
  • 99