101 – Les sélecteurs historiques

  • Sélecteur universel : pour appliquer un style à l’ensemble des éléments HTML de la page. Syntaxe : * {…}.
  • Sélecteur d’élément : pour appliquer un style à un élément HTML existant. Syntaxe : p {…}.
  • Sélecteur de classe : permet d’appliquer un style à un élément qui utilise cette classe. Syntaxe : .intro {…}.
  • Sélecteur de classe d’élément : permet d’appliquer un style à un élément spécifié qui utilise cette classe. Syntaxe : p.intro {…}.
  • Sélecteur descendant : permet d’appliquer un style à un élément spécifié qui est placé dans un autre élément spécifié. Syntaxe : p .nomPropre {…}.
  • Sélecteur enfant : permet d’appliquer un style au premier élément enfant d’un autre élément spécifié. Syntaxe : p>.nomPropre {…}.
  • Sélecteur adjacent : permet d’appliquer un style à un élément qui suit immédiatement un autre élément spécifié. Syntaxe : h1+h2 {…}.
  • Sélecteur d’attribut : permet d’appliquer un style à un élément s’il utilise un attribut spécifié. Syntaxe : p[lang] {…}.
  • Sélecteur d’identification : pour appliquer un style à un élément possédant un identifiant spécifié unique. Syntaxe : #bandeauHaut {…}.

Les pseudo-classes

Les pseudo-classes s’ajoutent à un sélecteur et permettent d’appliquer une mise en forme spécifique.

  • La pseudo-classe de premier enfant vous permet d’appliquer un style au premier enfant d’un élément. Syntaxe : ul li:first-child {…}.
  • Les pseudo-classes d’ancre vous permettent d’appliquer des styles aux ancres pour les états non visité et visité. Syntaxe : a:link {…} et a:visited {…}.
  • Les pseudo-classes dynamiques vous permettent d’appliquer des styles aux ancres pour les états survolé et cliqué et aux champs de formulaire pour l’état actif. Syntaxe : a:hover {…}, a:active {…} et .champTexte:focus {…}.
  • La pseudo-classe de langue vous permet d’appliquer des styles selon la langue spécifiée. Syntaxe : :lang(fr) {…}.

Les pseudo-éléments

Les pseudo-éléments s’ajoutent à un sélecteur et permettent d’appliquer une mise en forme spécifique. 

  • Les pseudo-éléments de première lettre et de premières lignes. Avec le pseudo-élément de première lettre, vous pouvez appliquer un style à la première lettre d’un élément.
    Syntaxe : .special:first-letter {…}.
    Syntaxe : .special:first-line {…}.
  • Les pseudo-éléments avant et après. Avec ces pseudo-éléments, vous allez pouvoir générer du texte avant ou après un élément.
  • Syntaxe : .citation:before {…} et .remarque:after {…}.