Any nth:child equivalent for non-sibling elements?

Question

I am working on a site and came across a problem. I have several divs with the same css class applied to them. I want to rotate every3rd,5th 8th etc with css transform to give the look of randomness. I have done this with nth-child in the past, but now my divs not direct siblings but are nested about 5 levels down from the common parent.

Here is a simplification of the code (too long to add all).

<tr>
  <td valign="top" width="20%">
    <form>
      <div class="box fp-product-listing">
        <div class="product-image">
          <a href="">
            <img class=" " />
          </a>
        </div>
        <div class="product-description">
          <a href="""></a>
          <div class="prices"> <- THIS IS THE DIV TO BE STYLED
          </div>
        </div>
      </div>
    </form>
  </td>
  <td valign="top" width="20%">
    <form>
      <div class="box fp-product-listing">
        <div class="product-image">
          <a href="">
            <img class=" " />
          </a>
        </div>
        <div class="product-description">
          <a href="""></a>
          <div class="prices"> <- THIS IS THE DIV TO BE STYLED
          </div>
        </div>
      </div>
    </form>
  </td>
</tr>

Any advice on how to do this with pure CSS? (no I'm not going to use jQuery just for this little effect :)

Thanks in advance.

Answer 1

From the HTML you've provided, it looks like each div.prices is in its own td, in that pattern. In that case you use td:nth-child(...) div.prices and not div.prices:nth-child(...), since the td elements are siblings of one another.