Menu
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:
<section class="featured video"> <h1>VIDEO</h1> </section> <section class="featured module"> <h1>NOT A VIDEO</h1> </section> <section class="featured module"> <h1>NOT A VIDEO</h1> </section> <section class="featured module"> <h1>NOT A VIDEO (3)</h1> </section> <section class="featured module"> <h1>NOT A VIDEO</h1> </section> <section class="featured module"> <h1>NOT A VIDEO</h1> </section> <section class="featured module"> <h1>NOT A VIDEO (6)</h1> </section> 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; } 
255
Basic example The selector looks at the type only when creating the list of matches. You can however apply CSS to an element based on :nth-of-type location and a class, as shown in the example above.
The :nth-of-type() pseudo-class represents an element that has an+b siblings with the same expanded element name before it in the document tree, for any zero or positive integer value of n, and has a parent element.
The :nth-of-type selector allows you select one or more elements based on their source order, according to a formula. It is defined in the CSS Selectors Level 3 spec as a “structural pseudo-class”, meaning it is used to style content based on its relationship with parent and sibling elements.
The nth-of-type is very similar to the nth-child pseudo-class. The main difference is that it specifically considers the type of the element getting selected before checking any other logic. Let's use our example from above but apply nth-of-type instead.
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.
135
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
