Menu
So I'm creating a hexagon pattern with CSS3, and I'd like it to look like this;
http://www.upperfirst.com
I'm having my hexagons float:left in a body of a certain width. I can effectively accomplish the results in the link above if I can select the first element in every other row. What would be the nth-child formula for that?
It would be the 5th element, then every 7th element after that?
781
Definition and Usage 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.
The CSS child selector has two selectors separated by a > symbol. The first selector indicates the parent element. The second selector indicates the child element CSS will style.
:nth-child(4n+4) As you can see, both selectors will match the same elements as above. In this case, there is no difference.
The syntax for selecting the first n number of elements is a bit counter-intuitive. You start with -n, plus the positive number of elements you want to select. For example, li:nth-child(-n+2) will select the first 2 li elements.
The formula is :nth-child(7n+5). The 7n represents "every 7th element" and the +5 represents "starting from the 5th element".
More on :nth-child() in the Selectors spec.
62
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
