Menu
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-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.
When you group CSS selectors, you apply the same styles to several different elements without repeating the styles in your stylesheet. Instead of having two, three, or more CSS rules that do the same thing (set the color of something to red, for example), you use a single CSS rule that accomplishes the same thing.
As the name implies, :nth-child() allows you to construct an arithmetic expression using the n variable in addition to constant numbers. You can perform addition (+), subtraction (-) and coefficient multiplication (an where a is an integer, including positive numbers, negative numbers and zero).
Here's how you would rewrite the above selector list:
div:nth-child(4n)
For an explanation on how these arithmetic expressions work, see my answer to this question, as well as the spec.
Note that this answer assumes that all of the child elements within the same parent element are of the same element type, div. If you have any other elements of different types such as h1 or p, you will need to use :nth-of-type() instead of :nth-child() to ensure you only count div elements:
<body>
<h1></h1>
<div>1</div> <div>2</div>
<div>3</div> <div>4</div>
<h2></h2>
<div>5</div> <div>6</div>
<div>7</div> <div>8</div>
<h2></h2>
<div>9</div> <div>10</div>
<div>11</div> <div>12</div>
<h2></h2>
<div>13</div> <div>14</div>
<div>15</div> <div>16</div>
</body>
For everything else (classes, attributes, or any combination of these), where you're looking for the nth child that matches an arbitrary selector, you will not be able to do this with a pure CSS selector. See my answer to this question.
By the way, there's not much of a difference between 4n and 4n + 4 with regards to :nth-child(). If you use the n variable, it starts counting at 0. This is what each selector would match:
:nth-child(4n)
4(0) = 0
4(1) = 4
4(2) = 8
4(3) = 12
4(4) = 16
...
:nth-child(4n+4)
4(0) + 4 = 0 + 4 = 4
4(1) + 4 = 4 + 4 = 8
4(2) + 4 = 8 + 4 = 12
4(3) + 4 = 12 + 4 = 16
4(4) + 4 = 16 + 4 = 20
...
As you can see, both selectors will match the same elements as above. In this case, there is no difference.
div:nth-child(4n+4)
See: http://css-tricks.com/how-nth-child-works/
You need the correct argument for the nth-child pseudo class.
The argument should be in the form of an + b to match every ath child starting from b.
Both a and b are optional integers and both can be zero or negative.
a is zero then there is no "every ath child" clause.a is negative then matching is done backwards starting from b.b is zero or negative then it is possible to write equivalent expression using positive b e.g. 4n+0 is same as 4n+4. Likewise 4n-1 is same as 4n+3.Examples:
li:nth-child(4n) {
background: yellow;
}<ol>
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
</ol>li:nth-child(4n+1) {
background: yellow;
}<ol>
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
</ol>/* two selectors are required */
li:nth-child(4n+3),
li:nth-child(4n+4) {
background: yellow;
}<ol>
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
</ol>/* when a is negative then matching is done backwards */
li:nth-child(-n+4) {
background: yellow;
}<ol>
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
</ol>Try this
div:nth-child(4n+4)
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