Le langage CSS/CSS 3

Un livre de Wikilivres.

Description[modifier | modifier le wikicode]

Le CSS3 a été lancé en 1999 pour ajouter une couche de nouveaux mots clés.

Sélecteurs[modifier | modifier le wikicode]

Pour sélectionner des éléments[1] :

  • + : adjacence directe
  • ~ : adjacence indirecte
  • ^= : de début d'attribut
  • $= : de fin d'attribut
  • *= : de contenu d'attribut
  • |= : de début d'attribut suivi par un tiret (-)[2].

Pseudo-classes[modifier | modifier le wikicode]

  1. :active
  2. :any
  3. :any-link
  4. :checked
  5. :default
  6. :dir
  7. :disabled
  8. :empty
  9. :enabled
  10. :first
  11. :first-child
  12. :first-of-type
  13. :fullscreen
  14. :focus
  15. :hover
  16. :indeterminate
  17. :in-range
  18. :invalid
  19. :lang
  20. :last-child
  21. :last-of-type
  22. :left
  23. :link
  24. :not
  25. :nth-child
  26. :nth-last-child
  27. :nth-last-of-type
  28. :nth-of-type
  29. :only-child
  30. :only-of-type
  31. :optional
  32. :out-of-range
  33. :read-only
  34. :read-write
  35. :required
  36. :right
  37. :root
  38. :scope
  39. :target
  40. :valid
  41. :visited

Pseudo-éléments[modifier | modifier le wikicode]

  1. ::after
  2. ::backdrop
  3. ::before
  4. ::first-letter
  5. ::first-line
  6. ::selection

Fonctions[modifier | modifier le wikicode]

Le CSS3 fournit 17 fonctions supplémentaires[3], parmi lesquelles :

  • calc() réalise des calculs comprenant les quatre opérations fondamentales : addition, soustraction, multiplication et division. Exemple : width: calc(100px - 2em); padding: 1em; permet à l'élément de ne pas déborder à cause de son padding.
  • var() fait l'appel à une variable déjà attribuée. Exemple : --maCouleur: #08F; color: var(--maCouleur);

flexbox[modifier | modifier le wikicode]

Références[modifier | modifier le wikicode]