M

ALX DESIGN

HOME / CSS /

CSS : nth- memento

The kind of CSS selectors reminder I like to keep close.

Select the 1st element

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
li:nth-child(1) { color: blueviolet; }

or

li:first-child { color: blueviolet; }

Select the last element

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
li:last-child { color: blueviolet; }

Select the second to last element

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
li:nth-last-child(2) { color: blueviolet; }

Select the 5th element

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
li:nth-child(5) { color: blueviolet; }

Select the 3 first elements

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
li:nth-child(-n+3) { color: blueviolet; }

Select all elements except the first 3

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
li:nth-child(n+4) { color: blueviolet; }

Select the 3 last elements

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
li:nth-last-child(-n+3) { color: blueviolet; }

Select all elements except the last 3

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
li:nth-last-child(n+4) { color: blueviolet; }

Select every 4 elements strarting with the 1st one

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
li:nth-child(4n-7) { color: blueviolet; }

or

li:nth-child(4n+1) { color: blueviolet; }

Select the even elements

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
li:nth-child(even) { color: blueviolet; }

Select the odd elements

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
li:nth-child(odd) { color: blueviolet; }

Using a formula (an + b). Description: a represents a cycle size, n is a counter (starts at 0), and b is an offset value.

— http://www.w3schools.com/cssref/sel_nth-child.asp
Widely inspired by http://www.marevueweb.com/css-html/liste-nth-child-propriete/

BACK TO HOME

Leave a comment ?