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.
Styling every 3rd and 4th item
To select every 3rd and 4th item you can use 4n + 3
and 4n + 4
in nth-child
selector.
div > div { width: 50px; display: inline-block; height: 50px; border: 1px solid black;}
div > div:nth-child(4n + 3), div > div:nth-child(4n + 4){ width: 100px;}
<div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div></div>
Style every third element?
This is possible with pure CSS. No javascript needed.
Use the nth-child selector.1
section > div:nth-child(3n+1) {
background:red;
}
Where '1' is where the style starts, and 3 indicates that it should style every third element. It is explained much better here.
jsFiddle demo here.
1Note - as other people have mentioned this is not fully supported by IE8 and down.
Select every third elements in CSS
You were trying to select every third div
element within a li
. Since there is only one div
element within each li
, none were being selected. You should select every third li
element instead:
li:nth-of-type(3n) > div {
margin-right: 0;
}
Example Here
CSS nth-child: every 3rd element starting from the 4th
If you want to start from the 4th element use +4
not +1
section:nth-child(3n+4) { color: red;}
<section>Section</section><section>Section</section><section>Section</section><section>Section</section><section>Section</section><section>Section</section><section>Section</section><section>Section</section><section>Section</section><section>Section</section><section>Section</section><section>Section</section><section>Section</section>
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 every third element with jquery?
I found out what was wrong. Not sure I understand though. The .card-list were not the only elements in my row.
The $('.card-list:nth-child(3n)')
was not only counting the .card-list but also what came before, even though it didn't have the .card-list class.
I should have checked that earlier, thank you for the help by the way.
Here is what I had :
<div class="row">
<div class="col-xs-12 text-center">
<h2 class="title-bullet-small">Title</h2>
</div>
<div class="col-xs-12 list-filters">
Some forms
</div>
<div class="card-list">
Card
</div>
<div class="card-list">
Card
</div>
<div class="card-list">
Card
</div>
</div>
Here is what I had to do in order for the $('.card-list:nth-child(3n)')
to work:
<div class="row">
<div class="col-xs-12 text-center">
<h2 class="title-bullet-small">Title</h2>
</div>
<div class="col-xs-12 list-filters">
Some forms
</div>
</div>
<div class="row">
<div class="card-list">
Card
</div>
<div class="card-list">
Card
</div>
<div class="card-list">
Card
</div>
</div>
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
Related Topics
Elements in a Flex Container Are Not Wrapping
Make Grid Items Fill Columns Not Rows
Share Style Across Web Components "Of The Same Type"
Flipping/Inverting/Mirroring Text Using CSS Only
Working with Canvas in Different Screen Sizes
Infinite Loop Slider Using Keyframes CSS3
CSS How to Make <Td> a Fixed Height
Overlap Border of Parent with H2 Margin Negative
Vertically Center Text in a 100% Height Div
Why Isn't My Textarea's Placeholder Showing Up
Is It Okay to Add Id/Class to <Link> Tag
Keep Box-Shadow Direction Consistent While Rotating
Images Not Displaying in Github Pages
Placing an Image to The Top Right Corner - CSS