In this tutorial we're going to investigate some quick Sass mixins that can make working with nth-child that little bit easier. The CSS nth-child selector allows you to select a group of elements with the same selectors. This is most commonly used to select the odd or even elements in a group of elements with the same selectors. The most common use for this is styling a table as zebra style table rows, where each row is alternatively coloured.
Using the CSS selector :first-of-type you can select the first element of the selector.
@mixin first-child() {
&:first-of-type {
@content
}
}
li
{
@include first-child()
{
background: red;
}
}
Similar to the :first-of-type you can also use the :last-of-type selector to get the last element of the group.
@mixin last-child() {
&:last-of-type {
@content
}
}
li
{
@include last-child()
{
background: red;
}
}
To create the standard zebra tables look you can use the nth-child selector passing in even as the parameter, this will select all even elements in the list of selected elements. Using the below mixin we can create a nice way of highlighting all even elements in the group.
@mixin even(){
&:nth-child(even) {
@content
}
}
li
{
@include evens()
{
background: red;
}
}
Similar to the evens nth-child selector you can use odd to select the odd elements in the group.
@mixin odd(){
&:nth-child(odd) {
@content
}
}
li
{
@include odd()
{
background: red;
}
}
If you want to select the first nth number of elements you can use the following mixin, this will take a parameter of how many elements you want to select. If you pass in 1 if will just use the first-child selector, if you pass in any other number then it uses nth-child selector to get the first nth elements.
@mixin first($num) {
@if $num == 1 {
&:first-child {
@content;
}
}
@else {
&:nth-child(-n + #{$num}) {
@content;
}
}
}
li
{
@include first(4)
{
background: red;
}
}
Similar to the first nth selector you can do the opposite and select the last nth elements.
@mixin last($num) {
&:nth-last-child(-n + #{$num}) {
@content;
}
}
li
{
@include last(4)
{
background: red;
}
}
The following mixin will allow you to select all elements after a certain number, for this example we're passing in the number 4 which means the mixin will highlight elements 5-10.
@mixin after($num) {
&:nth-child(n+#{$num + 1}) {
@content
}
}
li
{
@include after(4)
{
background: red;
}
}
Using this mixin you are able to select a certain element from the end of the group of elements, for this example we're passing in the number 4 again and the mixin will select the 4th element from the end being number 7.
@mixin from-end($num) {
&:nth-last-child(#{$num}) {
@content
}
}
li
{
@include from-end(4)
{
background: red;
}
}
If you want to select the elements between 2 numbers then you can use the following mixin and pass in the start number and the end number.
@mixin between($first,$last) {
&:nth-child(n+#{$first}):nth-child(-n+#{$last}) {
@content
}
}
li
{
@include between(1, 4)
{
background: red;
}
}
To select all the elements excluding one use the following mixin, just pass in the number you want to exclude and all will be highlighted apart from this number.
@mixin all-but($num) {
&:not(:nth-child(#{$num})) {
@content
}
}
li
{
@include all-but(4)
{
background: red;
}
}
Or you can use nth-child the way it was designed for by selecting every nth element by passing in a number, in this example we're passing in 3 which will highlight elements 3, 6 and 9.
@mixin each($num) {
&:nth-child(#{$num}n) {
@content
}
}
li
{
@include each(3)
{
background: red;
}
}
For more mixins visit https://lukyvj.github.io/family.scss/