Issue
I have been reading this article and it is pretty clear to me so far that something along the lines of: ul li:nth-child(3n+3)
will select every 3rd li
due to the fact that the "n" within the expression starts at zero and then represents a set of all positive integers; so n = 0, n = 1, n = 2, etc., which in the article I have linked goes on to indicate that indeed :nth-child(3n+3)
is tantamount to (3x0)+3 which equals 3, (3x1)+3 equals 6 and so on. I have also seen similar CSS such as: .some-selector:nth-child(1n); .some-selector:nth-child(2n);
What I glean from the examples from the aforementioned article leads me to posit that .some-selector:nth-child(1n);
would equate to .some-selector:nth-child(0);
but this also feels wrong to me. Can someone help me to better understand this? Thanks
Solution
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>
2n
would be every 2nd child, starting with the second child ([0], 2, 4, 6, 8, 10, ...). Technically this would start with the zeroth child, but there is no such thing in HTML/CSS, so it's functionally equivalent to 2n+2
.
div:nth-child(2n)
{
color: red;
}
<div>Hi</div>
<div>Hi</div>
<div>Hi</div>
<div>Hi</div>
<div>Hi</div>
2n+1
would be every 2nd child, starting with the first child (1, 3, 5, 7, 9, ...).
div:nth-child(2n+1)
{
color: red;
}
<div>Hi</div>
<div>Hi</div>
<div>Hi</div>
<div>Hi</div>
<div>Hi</div>
You can specify any Y value in Xn+Y
, so if you wanted your every-other selector to start with the 4th element, it would be 2n+4
div:nth-child(2n+4)
{
color: red;
}
<div>Hi</div>
<div>Hi</div>
<div>Hi</div>
<div>Hi</div>
<div>Hi</div>
<div>Hi</div>
<div>Hi</div>
<div>Hi</div>
<div>Hi</div>
<div>Hi</div>
You can also specify a number in nth-child
to directly select whichever child you want.
div:nth-child(4)
{
color: red;
}
<div>Hi</div>
<div>Hi</div>
<div>Hi</div>
<div>Hi</div>
<div>Hi</div>
<div>Hi</div>
<div>Hi</div>
<div>Hi</div>
<div>Hi</div>
<div>Hi</div>
Answered By - Liftoff
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.