Pense bête

Proprietes :nth-child() et :nth-of-type()

1) Sélectionner seulement le 5e élément.

:nth-child(5)

:nth-of-type(5)

Pour le 1° element : :nth-child(1) ou :first-child.

  • 01
  • 02
  • 03
  • 04
  • 05
  • 06
  • 07
  • 08
  • 09
  • 10

2) Tout sélectionner sauf les cinq premiers.

:nth-child(n+6)

:nth-of-type(n+6)

  • 01
  • 02
  • 03
  • 04
  • 05
  • 06
  • 07
  • 08
  • 09
  • 10

3) Sélectionner seulement les cinq premiers.

:nth-child(-n+5)

:nth-of-type(-n+5)

  • 01
  • 02
  • 03
  • 04
  • 05
  • 06
  • 07
  • 08
  • 09
  • 10

4) Selectionner à chaque quatre éléments, en comment par le premier.

:nth-child(4n-7)

:nth-of-type(4n-7)

  • 01
  • 02
  • 03
  • 04
  • 05
  • 06
  • 07
  • 08
  • 09
  • 10

5) Sélectionner seulement les positions paires ou les impaires

Pair : :nth-child(event)

:nth-of-type(event)

  • 01
  • 02
  • 03
  • 04
  • 05
  • 06
  • 07
  • 08
  • 09
  • 10

impair : :nth-child(odd)

:nth-of-type(odd)

  • 01
  • 02
  • 03
  • 04
  • 05
  • 06
  • 07
  • 08
  • 09
  • 10

6) Sélectionner le dernier élément de la liste.

:last-child

  • 01
  • 02
  • 03
  • 04
  • 05
  • 06
  • 07
  • 08
  • 09
  • 10

7) Sélectionner l’avant-dernier élément de la liste.

:nth-last-child(2)

  • 01
  • 02
  • 03
  • 04
  • 05
  • 06
  • 07
  • 08
  • 09
  • 10

Ombrages

box-shadow: X Y F #000;

  • X : decalge horizontal
  • Y : decalge vertical
  • F : rayon de flou (facultatif)

box-shadow:8px 8px 12px #aaa;

box-shadow:1px 1px 12px #000;

Ombrage sur du texte

text-shadow:4px 2px 2px #f00;

Vestibulum erat wisi

Bordure sur du texte

text-shadow: X Y F #000;

  • X : decalge horizontal
  • Y : decalge vertical
  • F : rayon de flou (facultatif)

Exemple 01 :

IMPENDENTIBUS

text-shadow:1px 0 0 #000, 0 1px 0 #000, 0 -1px 0 #000, -1px 0 0 #000, 1px 1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, -1px -1px 0 #000;

Exemple 02 :

IMPENDENTIBUS

text-shadow: 1.5px 0 0 #000, 0 1.5px 0 #000, 0 -1.5px 0 #000, -1.5px 0 0 #000, 1.5px 1px 0 #000, 1.5px -1.5px 0 #000, -1px 1.5px 0 #000, -1.5px -1.5px 0 #000;

Exemple 03 :

IMPENDENTIBUS

text-shadow: 2px 0 0 #000, 0 2px 0 #000, 0 -2px 0 #000, -2px 0 0 #000, 2px 2px 0 #000, 2px -2px 0 #000, -2px 2px 0 #000, -2px -2px 0 #000;

Bordures

border-width:1px 2px 3px 4px;
border-style:dotted;
border-color:#000;

border-width:1px 2px 3px 4px;
border-style:dashed;
border-color:#000;

border-width:1px 2px 3px 4px;
border-style:solid;
border-color:#000;

border-width:3px 4px 5px 6px;
border-style:double;
border-color:#000;

border-width:10px;
border-style:groove;
border-color:#000;

border-width:10px;
border-style:ridge;
border-color:#000;

border-width:10px;
border-style:inset;
border-color:#000;

border-width:5px;
border-style:outset;
border-color:#000;

Tocco  sur Facebook mod retrouvez facebook et Instagram mod retrouvez facebook