M

Contact

Contact

The whole content, including texts, images, videos, and every medias is under creative commons licence BY SA :

Licence Creative Commons by sa

Click for more information.

For any request, please use this form:

ALX DESIGN

HOME / CSS /

CSS : nth- memento

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

D

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

Leave a comment ?