Les nouveaux sélecteurs (suite)

  • E :nth-child(n) — Le nième enfant de E

div :nth-child(3) { background: red; }
div :nth-child(3n+1) { background: red; }
  • E :nth-last-child(n) — Idem, en comptant de la fin

div :nth-last-child(3) { background: red; }
  • E:nth-of-type(n) — Le nième élément de type E

div img:nth-of-type(3) { background: green; }
  • E:nth-last-of-type(n) — Idem, en comptant de la fin

  • E :only-child — Le seul enfant de E

div :only-child { background: blue; }
  • E:first-of-type — Le premier élément de type E

div img:first-of-type { background: red; }
  • E:last-of-type — Le dernier élément de type E

div img:last-of-type { background: green; }
  • E:only-of-type — Le seul élément de type E

div p:only-of-type { background: yellow; }

Last updated