2019-08-23
Why doesn't nth-of-type/nth-child work on nested elements?
stackoverflow
Question

I'm trying to change the style of odd divs that are inside a div. For some reason the nth-of-type(odd) is affecting all my divs when it's inside another div. Here is my code for both the regular div and the odd divs:

.video-entry-summary { 
  width: 214px; 
  height: 210px; 
  margin-left: 10px; 
  float: left; 
  position: relative; 
  overflow: hidden; 
  border: 1px solid black; 
} 
 
.video-entry-summary:nth-of-type(odd) { 
  width: 214px; 
  height: 210px; 
  margin-left: 0px; 
  float: left; 
  position: relative; 
  overflow: hidden; 
  border: 1px solid black; 
  background: #ccc; 
}
<div id="post-501" class="post-501 post type-post status-publish format-standard hentry category-moto-dz-films tag-news-sub-2"> 
  <div class="video-entry-summary"> 
    video 1 
  </div> 
</div> 
 
<div id="post-240" class="post-240 post type-post status-publish format-standard hentry category-videos"> 
  <div class="video-entry-summary"> 
    video 2 
  </div> 
</div> 
 
<div id="post-232" class="post-232 post type-post status-publish format-standard hentry category-videos"> 
  <div class="video-entry-summary"> 
    video 3 
  </div> 
</div> 
 
<div id="post-223" class="post-223 post type-post status-publish format-standard hentry category-videos"> 
  <div class="video-entry-summary"> 
    video 4 
  </div> 
</div>

For some reason, the nth-of-type doesn't work when wrapped inside of my divs, but does work when they aren't wrapped inside in any divs.

Working version when not wrapped inside div:

.video-entry-summary { 
  width: 214px; 
  height: 210px; 
  margin-left: 10px; 
  float: left; 
  position: relative; 
  overflow: hidden; 
  border: 1px solid black; 
} 
 
.video-entry-summary:nth-of-type(odd) { 
  width: 214px; 
  height: 210px; 
  margin-left: 0px; 
  float: left; 
  position: relative; 
  overflow: hidden; 
  border: 1px solid black; 
  background: #ccc; 
}
<div class="video-entry-summary"> 
  video 1 
</div> 
 
<div class="video-entry-summary"> 
  video 2 
</div> 
 
<div class="video-entry-summary"> 
  video 3 
</div> 
 
<div class="video-entry-summary"> 
  video 4 
</div>

​How to make the initial code working the same as the above one?

Answer
1

:nth-of-type() is similar to :nth-child() in that they must all be from the same parent. If you need those wrapper divs, use :nth-of-type() on those wrappers instead:

div.post:nth-of-type(odd) .video-entry-summary {
    width:214px; 
    height:210px; 
    margin-left:0px;
    float:left;
    position:relative; 
    overflow:hidden; 
    border:1px solid black; 
    background:#ccc; 
}

If all the siblings are .post, use :nth-child() instead to prevent confusion with what :nth-of-type() really means:

.post:nth-child(odd) .video-entry-summary {
    width:214px; 
    height:210px; 
    margin-left:0px;
    float:left;
    position:relative; 
    overflow:hidden; 
    border:1px solid black; 
    background:#ccc; 
}

.video-entry-summary { 
  width: 214px; 
  height: 210px; 
  margin-left: 10px; 
  float: left; 
  position: relative; 
  overflow: hidden; 
  border: 1px solid black; 
} 
 
.post:nth-child(odd) .video-entry-summary { 
  width: 214px; 
  height: 210px; 
  margin-left: 0px; 
  float: left; 
  position: relative; 
  overflow: hidden; 
  border: 1px solid black; 
  background: #ccc; 
}
<div id="post-501" class="post-501 post type-post status-publish format-standard hentry category-moto-dz-films tag-news-sub-2"> 
  <div class="video-entry-summary"> 
    video 1 
  </div> 
</div> 
 
<div id="post-240" class="post-240 post type-post status-publish format-standard hentry category-videos"> 
  <div class="video-entry-summary"> 
    video 2 
  </div> 
</div> 
 
<div id="post-232" class="post-232 post type-post status-publish format-standard hentry category-videos"> 
  <div class="video-entry-summary"> 
    video 3 
  </div> 
</div> 
 
<div id="post-223" class="post-223 post type-post status-publish format-standard hentry category-videos"> 
  <div class="video-entry-summary"> 
    video 4 
  </div> 
</div>

Why doesn't nth-of-type/nth-child work on nested elements?
See more ...