nth-child Examples

Based on Master the :nth-child tutorial video.

Play around on Codepen.

1. All

:nth-child(n)

2. None

:nth-child(0)

3. Only first item

:nth-child(1)

4. Only fifth item

:nth-child(5)

5. Even

:nth-child(even)

6. Odd

:nth-child(odd)

7. Every third

:nth-child(3n)

8. Every third, offset by 4

:nth-child(3n + 4)

9. Every third, offset by 21

:nth-child(3n + 21)

10. Every item 5 and above

:nth-child(n + 5)

11. Every item 5 and below

:nth-child(-n + 5)

12. Range 4-7

:nth-child(n + 4):nth-child(-n + 7)

13. Range 53-58

:nth-child(n + 53):nth-child(-n + 58)

14. Last item

:nth-last-child(1)

15. Fifth from the end

:nth-last-child(5)

16. Every third from the end

:nth-last-child(3n)

17. Even columns

SCSS preprocessor:
@for $i from 1 through 10 {
  &:nth-child(20n + #{$i + 10}) {
    opacity: 1;
  }
}

18. Odd columns

SCSS preprocessor:
@for $i from 1 through 10 {
  &:nth-child(20n + #{$i}) {
    opacity: 1;
  }
}

19. First column

SCSS preprocessor:
@for $i from 1 through 10 {
  &:nth-child(#{$i}) {
    opacity: 1;
  }
}

20. Middle columns

SCSS preprocessor:
@for $i from 1 through 20 {
  &:nth-child(#{$i + 40}) {
    opacity: 1;
  }
}

21. Last column

SCSS preprocessor:
@for $i from 1 through 10 {
  &:nth-last-child(#{$i}) {
    opacity: 1;
  }
}

22. First half of columns

SCSS preprocessor:
@for $i from 1 through 5 {
  &:nth-child(10n + #{$i}) {
    opacity: 1;
  }
}

23. Second half of columns

SCSS preprocessor:
@for $i from 1 through 5 {
  &:nth-child(10n + #{$i + 5}) {
    opacity: 1;
  }
}

24. First row

SCSS preprocessor:
@for $i from 1 through 1 {
  &:nth-child(10n + #{$i}) {
    opacity: 1;
  }
}

25. Middle rows

SCSS preprocessor:
@for $i from 1 through 2 {
  &:nth-child(10n + #{$i + 4}) {
    opacity: 1;
  }
}

26. Last row

SCSS preprocessor:
@for $i from 1 through 1 {
  &:nth-child(10n + #{$i + 9}) {
    opacity: 1;
  }
}