CODEWITHSUNDEEP
htmlcsscss-selectors
Ramūnas Pabrėža
Ramūnas Pabrėža

Reputation: 604

css nth-child or nth-of-type issue

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%; }

Upvotes: 0

Views: 80

Answers (1)

jeffjenx
jeffjenx

Reputation: 17457

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%; }

Upvotes: 1

Related Questions