How select nth-of-type from multiple classes?

Question

I've this HTML code:

<div class="products-wrap">
  <div class="product-item"></div>
  <div class="product-item"></div>
  <div class="clearfix-sm"></div>
  <div class="product-item"></div>
  <div class="clearfix-lg"></div>
  <div class="product-item"></div>
  <div class="clearfix-sm"></div>
  <div class="product-item"></div>
  <div class="product-item"></div>
  <div class="clearfix-lg"></div>
  <div class="product-item"></div>
  ...etc
</div>

I would like to select with CSS only 3rd divs with .product-item classes. My problem is, that :nth-of-type(3n+0) counts with all divs, so the 3rd .product-item skip.

I've tried

.product-wrap > .product-item:nth-of-type(3n+0) {
  ...
}

but it doesn't work. Is there any other way?

Thanks for help :)

Similar question (maybe duplicate) : http://stackoverflow.com/questions/6447045/css3-selector-first-of-type-with-class-name/6447072 — nelek, Aug 03 '15 at 11:38
TL;DR: based on the responses from duplicate questions, it cannot be done with only CSS. — klaar, Aug 03 '15 at 11:39

score -1 · Answer 1 · answered Aug 03 '15 at 11:26

div {
  width: 100px;
  height: 40px;
  border: 1px solid;
}

.product-item:nth-child(3n+1) {
  background-color: red;
}

<div class="products-wrap">
  <div class="product-item"></div>
  <div class="product-item"></div>
  <div class="product-item"></div>
  <div class="product-item"></div>
  <div class="product-item"></div>
  <div class="product-item"></div>
  <div class="product-item"></div>
  <div class="product-item"></div>
  <div class="product-item"></div>
  <div class="product-item"></div>
  <div class="product-item"></div>
</div>

Please re-read the question. This is not an answer to the OP's question — Paulie_D, Aug 03 '15 at 11:29

How select nth-of-type from multiple classes?

1 Answers1