Why doesn’t nth-of-type/nth-child work on nested elements?

by

: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>

More Related Contents:

  1. CSS Pseudo-classes with inline styles
  2. CSS :selected pseudo class similar to :checked, but for elements
  3. CSS negation pseudo-class :not() for parent/ancestor elements
  4. How can I style even and odd elements?
  5. Several elements with the same ID responding to one CSS ID selector
  6. Matching the first/nth element of a certain type in the entire document
  7. Using CSS :before and :after pseudo-elements with inline CSS?
  8. Difference in applying CSS to html, body, and the universal selector *?
  9. How can I correctly select the first or the last child with CSS?
  10. A CSS selector to get last visible div
  11. Using :before and :after CSS selector to insert HTML [duplicate]
  12. What is syntax for selector in CSS for next element?
  13. :nth-child(even/odd) selector with class [duplicate]
  14. How to CSS: select element based on inner HTML [duplicate]
  15. What are the priorities among CSS selectors
  16. Default :target with CSS
  17. Can a ::before selector be used with a ?
  18. Avoiding repeated constants in CSS
  19. Select second last element with css
  20. How do I give a CSS class priority over an id?
  21. How to run the CSS3 animation to the end if the selector is not matching anymore?
  22. Why does the general-sibling combinator allow toggling pseudo-element’s content, but not the adjacent-sibling?
  23. Is there a css selector for selecting an element futherup in the html?
  24. How to get CSS to select ID that begins with a string (not in Javascript)?
  25. Selecting the last element among various nested containers
  26. Is there a reason to use a instead of a:link or a:visited in my stylesheet?
  27. Zebra striping a flexbox table with wrapping items
  28. How to select classes with spaces
  29. CSS nth-match doesn’t work
  30. Targeting text nodes with CSS

Leave a Comment