Get Even More Visitors To Your Blog, Upgrade To A Business Listing >>

css3 nth of type restricted to class

css3 nth of type restricted to class

Problem

Is there any way to limit css3's nth-of-type to a class? I've got a dynamic number of section elements with different classes designating their layout needs. I'd like to grab every 3rd .module, but it seems that nth-of-type looks up classes element type and then calculates the type. Instead I'd like to limit it to only .modules.

Thanks!

JSFiddle to demonstrate: http://jsfiddle.net/danielredwood/e2BAq/1/

HTML:

​CSS:

.featured {
  width:31%;
  margin:0 0 20px 0;
  padding:0 3.5% 2em 0;
  float:left;
  background:#ccc;
}
  .featured.module:nth-of-type(3n+3) {
    padding-right:0;
    background:red;
  }
  .featured.video {
    width:auto;
    padding:0 0 2em 0;
    float:none;
  }​
Problem courtesy of: technopeasant

Solution

Unfortunately, there is no way (at least none I know of) to select nth-of-type of a class, since nth-of-class doesnt exist. You will probably have to add a new class to every third .module manually.

Solution courtesy of: Andrej

Discussion

View additional discussion.



This post first appeared on CSS3 Recipes - The Solution To All Your Style Problems, please read the originial post: here

Share the post

css3 nth of type restricted to class

×

Subscribe to Css3 Recipes - The Solution To All Your Style Problems

Get updates delivered right to your inbox!

Thank you for your subscription

×