nth-child
is a common way to style a specific element. For example 2n+1
is for all odd elements, and 2n
is for all even ones.
But how to choose the first/last half of elements without any JavaScript? One of my projects had this wired situation, and I prefer to not use any JavaScript codes.
Negative child range and nth-last-child
:nth-child(n+2)
means all elements without the first one.
:nth-child(-n+2)
means all elements without the last and the second ones.
nth-last-child(n+2)
will select elements from the second last one to the first one.
nth-last-child(-n+2)
will select elements from the second last one to the last one.
Last half of elements
According the example image, let's assume there are 4 elements -
half or more elements
:nth-child(n+2):nth-last-child(-n+2)
half or less elements
nth-child(n+3):nth-last-child(-n+2)
last half or more elements, top to 12
first-child:last-child,
nth-child(n+2):nth-last-child(-n+2),
nth-child(n+3):nth-last-child(-n+3),
nth-child(n+4):nth-last-child(-n+4),
nth-child(n+5):nth-last-child(-n+5),
nth-child(n+6):nth-last-child(-n+6)
Converts it to SCSS
What if there are 100 elements? You have to write 50 lines in CSS...
But we can make a @mixin
, then add a max number.
@mixin last-half-of-nth($maxNumber){
&:first-child:last-child{
color: white;
background: darkblue;
}
@for $n from 2 through $maxNumber{
&:nth-child(n+#{$n}):nth-last-child(-n+#{$n}){
color: white;
background: darkblue;
}
}
}
last half or more, top to 100
@include last-half-of-nth(50);
Limitation
You have to know the max number of the elements, otherwise it won't work. But this trick is still good for pure CSS without any JavaScript codes.
Preferences
https://stackoverflow.com/questions/15466898/selecting-half-the-elements-with-nth-child
Top comments (0)