Menu
I'm attempting at styling children items as follows
1,7,13,etc
2,8,14,etc
3,9,15,etc
4,10,16,etc
5,11,17,etc
6,12,18,etc
What nth-child syntax can I use to achieve this?
315
The :nth-child(n) selector matches every element that is the nth child of its parent. n can be a number, a keyword (odd or even), or a formula (like an + b). Tip: Look at the :nth-of-type() selector to select the element that is the nth child, of the same type (tag name), of its parent.
Yes, you can use what's known as :nth-child selectors. In this case you would use: li:nth-child(3n) { // Styling for every third element here. } :nth-child() is compatible in Chrome, Firefox, and IE9+.
The :nth-child selector allows you to 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.
You can use :nth-child(6n+1), :nth-child(6n+2), :nth-child(6n+3), :nth-child(6n+4) etc..
References: http://w3.org/TR/css3-selectors/#nth-child-pseudo , http://w3.org/TR/css3-selectors/#selectors (thanks @NayukiMinase)
Also, a very good example is here: Useful :nth-child Recipes - CSS-Tricks
179
read the explanation how nth-child works here.
you can use 6n+x, where you have to insert appropriate numbers for x.
41
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
