Select every Nth element in CSS
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.
How to select a group of elements after every nth-element in CSS?
Simple. you cant select occurring groups, but you can select every Nth element.
therefore, you need to select multiples of 6, and style 3 first elements with offsets +1, +2 and +3 from the recurring N as follows:
the following means in simple words: "every 6 elements, style only the 1st, 2nd and 3rd one"
p:nth-child(6n+1), p:nth-child(6n+2), p:nth-child(6n+3) { font-weight:bold; font-style:italic;}p { display:inline;}
<p>O</p><p>O</p><p>O</p><p>O</p><p>O</p><p>O</p><p>O</p><p>O</p><p>O</p><p>O</p><p>O</p><p>O</p><p>O</p><p>O</p><p>O</p><p>O</p><p>O</p><p>O</p><p>O</p><p>O</p><p>O</p><p>O</p><p>O</p><p>O</p><p>O</p><p>O</p><p>O</p>
Styling every 3rd item of a list using CSS?
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(3n):
3(0) = 0
3(1) = 3
3(2) = 6
3(3) = 9
3(4) = 12
:nth-child()
is compatible in Chrome, Firefox, and IE9+.
For a work around to use :nth-child()
amongst other pseudo-classes/attribute selectors in IE6 through to IE8, see this link.
How to add different CSS style to every nth element, depending on n using LESS
Using less(but you have to set the num of elements):
.parent (@indexstart,@index) when (@indexstart < @index ){
div:nth-child(@{indexstart}){
padding-left: (@indexstart - 1) * 15px;
}
.parent (@indexstart + 1,@index);
}
.parent (1,4);
See example
Selecting every 4th div
You should change
.content_tab:nth-child(4){
To
.content_tab:nth-child(4n){
As explained here http://css-tricks.com/how-nth-child-works/
Or if you do not want the first div to be selected, you need
.content_tab:nth-child(4n+4){
Every 5th child with nth-child
Other way around; you’re looking for :nth-child(5n+1)
.
The first number is the multiplier (in this case every 5th item) and the second number the offset. The offset is 1 because you want to start at the first item - if you left it off it’d start on the 0th and then show on the 5th.
How do I apply a style to every nth set of size m?
You can use the comma operator like this:
:nth-child(6n-2), /* 4, 10, 16, 22, ... */
:nth-child(6n-1), /* 5, 11, 17, 23, ... */
:nth-child(6n) /* 6, 12, 18, 24, ... */
ul { list-style: none; padding: 0; margin: 0;}li { display: inline-block; padding: 5px;}li:nth-child(6n-2),li:nth-child(6n-1),li:nth-child(6n) { background: green;}
<ul><li>01</li></ul><ul><li>01</li><li>02</li></ul><ul><li>01</li><li>02</li><li>03</li></ul><ul><li>01</li><li>02</li><li>03</li><li>04</li></ul><ul><li>01</li><li>02</li><li>03</li><li>04</li><li>05</li></ul><ul><li>01</li><li>02</li><li>03</li><li>04</li><li>05</li><li>06</li></ul><ul><li>01</li><li>02</li><li>03</li><li>04</li><li>05</li><li>06</li><li>07</li></ul><ul><li>01</li><li>02</li><li>03</li><li>04</li><li>05</li><li>06</li><li>07</li><li>08</li></ul><ul><li>01</li><li>02</li><li>03</li><li>04</li><li>05</li><li>06</li><li>07</li><li>08</li><li>09</li></ul><ul><li>01</li><li>02</li><li>03</li><li>04</li><li>05</li><li>06</li><li>07</li><li>08</li><li>09</li><li>10</li></ul><ul><li>01</li><li>02</li><li>03</li><li>04</li><li>05</li><li>06</li><li>07</li><li>08</li><li>09</li><li>10</li><li>11</li></ul><ul><li>01</li><li>02</li><li>03</li><li>04</li><li>05</li><li>06</li><li>07</li><li>08</li><li>09</li><li>10</li><li>11</li><li>12</li></ul>
CSS nth-child: what exactly does nth-child(1n) select
Xn
essentially means every Xth child, where Xn+Y
is every Xth child with an offset of Y.
1n
is quite nonsensical, as it will just select every child (every 1th child, which essentially is just every child).
div:nth-child(1n)
{
color: red;
}
<div>Hi</div>
<div>Hi</div>
<div>Hi</div>
<div>Hi</div>
<div>Hi</div>
CSS - styling every nth column in a table
How about the following; target every 4th <td>
and the <td>
before (-1
) every 4th element:
td:nth-child(4n), td:nth-child(4n-1){
background-color:#ddd;
}
<table>
<tr>
<td>1a</td><td>1b</td>
<td>2a</td><td>2b</td>
<td>3a</td><td>3b</td>
<td>4a</td><td>4b</td>
</tr>
</table>
Related Topics
Css Units - Difference Between Vh/Vw and %
How to Vertically Center Content With Variable Height Within a Div
In Which Order Do CSS Stylesheets Override
Left Aligned Last Row in Centered Grid of Elements
Css Image Size, How to Fill, But Not Stretch
Css Z-Index Lost After Webkit Transform Translate3D
Changing Background Image With Css3 Animations
How to Force Browsers to Print Background Images in CSS
Purpose of Asterisk Before a CSS Property
Justify the Last Line of a Div
How to Import Google Web Font in CSS File
Why Does Minmax(0, 1Fr) Work For Long Elements While 1Fr Doesn'T
How to Conditionally Apply CSS Styles in Angularjs
Css Property Border-Color Not Working
How to Define Colors as Variables in Css
Css3 Gradient Background Set on Body Doesn't Stretch But Instead Repeats