- 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 {…}.