8. Les Pseudo Class¶

Les 'pseudo-classes' et les 'pseudo-éléments' sont des fonctionnalités très utiles de CSS qui vous permettent de sélectionner et de styliser des éléments spécifiques de votre page Web d'une manière que les sélecteurs classiques ne permettent pas. Elles peuvent être utilisées pour une variété d'effets, allant du style des liens survolés à la création d'éléments de design sophistiqués.

Les Pseudo-classes¶

Les pseudo-classes permettent de sélectionner des éléments en fonction de leur état, de leur position ou d'autres caractéristiques qui ne peuvent pas être capturées par les sélecteurs d'éléments, de classes ou d'ID.

Voici quelques exemples de pseudo-classes couramment utilisées :

• :hover : Sélectionne un élément lorsque la souris est placée dessus.
• :active : Sélectionne un élément pendant qu'il est activé (par exemple, pendant qu'un bouton est enfoncé).
• :focus : Sélectionne un élément lorsqu'il a le focus (par exemple, lorsqu'un champ de formulaire est sélectionné pour la saisie de données).
• :nth-child(n) : Sélectionne un élément en fonction de son ordre dans un groupe d'éléments frères.

Actions interactives/utilisateur¶

1. :hover¶

Cela s'applique lorsque l'utilisateur survole un élément.

button:hover {
    background-color: lightblue;
    color: white;
}

Cela changera la couleur d'arrière-plan du bouton lorsque vous le survolerez.

2. :focus¶

S'applique lorsqu'un élément reçoit le focus (par exemple, une entrée de texte cliquée)

input:focus {
    border: 2px solid blue;
    outline: none;
}

Cela changera la bordure du champ de saisie en bleu lorsqu'il est focalisé.

3. :active¶

S'applique lorsqu'un élément est cliqué.

button:active {
    background-color: darkblue;
    color: white;
}

Cela changera la couleur d'arrière-plan du bouton lorsqu'il est cliqué (dans l'état actif).

4. :visited¶

S'applique aux liens que l'utilisateur a visités.

a:visited {
    color: purple;
}

Ordre des pseudo-classes¶

Il est fortement recommandé, si vous souhaitez utiliser les quatre états pour une balise d'ancrage, de créer vos ensembles de règles en CSS dans l'ordre suivant :

• visited
• hover
• active

Le fait de les définir dans le désordre sur votre CSS peut créer des actions imprévues, car le style en cascade de CSS peut avoir une propriété qui en remplace une autre. En bref, s'il existe des ensembles de règles concurrents, les styles déclarés ultérieurement remplacent généralement ceux déclarés précédemment.

Ciblage structurel¶

1. :first-child¶

Correspond au premier enfant de son parent

li:first-child {
    color: red;
}

2. : :last-child¶

Correspond au dernier enfant de son parent

li:last-child {
    color: blue;
}

3. :nth-child(n)¶

Correspond au n-ième enfant de son parent

li:nth-child(5) {
  color: green;
}

4. :nth-last-child(n)¶

Correspond au n-ième enfant à partir de la fin de son parent

li:nth-last-child(1) {
    color: orange;
}

5. :first-of-type¶

Correspond à la première instance d'un type spécifique dans un élément parent .

li:first-of-type {
    color: purple;
}

6. :last-of-type¶

Correspond à la dernière instance d'un type spécifique dans un parent.

li:last-of-type {
    color: yellow;
}

7. :nth-of-type(n)¶

Correspond à la nième instance d'un type spécifique.

li:nth-of-type(2) {
    color: pink;
}

8. :nth-last-of-type(n)¶

Correspond à la n-ième instance d'un type spécifique à partir de la fin.

li:nth-last-of-type(1) {
  color: brown;
}

Bien sur, ils peuvent être appliquer avec toutes sortes de balises HTML, pas uniquement <p>, <li>, ou <a>comme dans ces exemples.

Bon y'en reste d'autre moins utilisé! https://www.geeksforgeeks.org/css-pseudo-classes/

Les Pseudo-éléments¶

Les pseudo-éléments permettent de sélectionner et de styliser une partie spécifique d'un élément. Ils peuvent être utilisés pour ajouter des décorations spéciales, pour insérer du contenu dans le document et pour d'autres effets visuels.

Voici quelques exemples de pseudo-éléments couramment utilisés :

• ::before : Crée un élément virtuel que vous pouvez styliser comme vous le souhaitez avant le contenu d'un élément.
• ::after : Crée un élément virtuel que vous pouvez styliser comme vous le souhaitez après le contenu d'un élément.
• ::first-letter : Sélectionne la première lettre du texte à l'intérieur d'un élément.
• ::first-line : Sélectionne la première ligne de texte à l'intérieur d'un élément.

Ces pseudo-éléments ont un usage très spécifique, mais au combien puissant !

En voici un exemple utilisant ces techniques d'une manière extreme et pour les mouvements des animations CSS3 :

Ceci est une animation / conception 100% fait avec des techniques CSS! Aucune image est utilisée, pas de javascript ! © Mathieu Meylan