8.2 Pseudo-classes CSS

• générique où p dans CSS cible <p> éléments HTML
• classes où .intro dans CSS cible des éléments HTML avec un attributclass="intro"
• ids où #logo dans CSS cible les éléments HTML avec un attributid="logo"

Tous ces sélecteurs peuvent être associés à des pseudo-classes. Une pseudo-classe :

•  définit un état particulier de l’élément
• est un mot clé commençant par un deux-points :

Syntaxe

Une pseudo-classe ne peut pas exister par elle-même. Elle doit être attaché à un sélecteur. La pseudo-classe ne définira qu’un état particulier de ce sélecteur.

La syntaxe ressemble à ceci :

.selector:pseudo-class{}

Il n’y a pas d’espace entre le sélecteur et la pseudo-classe, ce qui signifie qu’ils sont liés.

:hover

Par exemple, une pseudo-classe couramment utilisée est: hover, qui appliquera un style CSS lorsque l’élément ciblé est survolé. Essayons-le sur les liens.

a { color:blue;}
a:hover { color: red;}

La première ligne définit l’apparence de tous les éléments HTML <a> (en bleu). La deuxième ligne définit l’apparence de <a> lorsque survolé (rouge).

La deuxième ligne cible les mêmes éléments HTML, mais uniquement lorsque quelque chose de spécifique se produit (dans ce cas, le survol).

:visited

Cette pseudo-classe cible les liens qui ont été visités. Par défaut, les liens sont bleus et deviennent violets lorsque vous les avez visités. Les résultats de Google fonctionnent comme ça.

a { color: dodgerblue;}
a:visited { color: rebeccapurple;}

<a href="https://www.google.com">Google</a>
<a href="https://twitter.com">Twitter</a>
<a href="https://www.facebook.com">Facebook</a>
<a href="https://www.mozilla.org">Mozilla</a>
<a href="http://ex-nihilo.descloussurlesnuages.com/visited.html">ex-nihilo</a>

L’application d’un lien différent pour les liens visités est souvent négligée, mais elle est pratique pour les utilisateurs parcourant une liste de résultats. Cela les aide facilement à visualiser où ils se sont déjà trouvés, les pages, les liens déjà visités – donc, déjà vus/(supposés) lus.

:focus

Cette pseudo-classe se produit lorsqu’un élément HTML est actif. Ceci est particulièrement utile pour les champs d’entrées – inputs HTML.

.form-input { border: 2px solid grey; padding: 5px;}
.form-input:focus{ background: lightyellow; border-color: blue; outline: none;}

outline: none; La règle supprime la lueur du champ.

:first-child and :last-child
(premier enfant et dernier enfant)

Ces pseudo-classes sont liées à la hiérarchie HTML. Ils ciblent les éléments HTML en fonction de leur ordre d’apparition dans le code.

<ul>
  <li>One</li>
  <li>Two</li>
  <li>Three</li>
  <li>Four</li>
</ul>

li:first-child{ background: greenyellow;}
li:last-child{ background: lightsalmon;}

Comme vous pouvez le constater, aucune classe CSS n’est appliquée au premier et au dernier <li>. Leur position dans la hiérarchie définit si la règle CSS est appliquée ou non.

Si nous devions ajouter un cinquième élément de liste et utiliser le même CSS, le style changerait automatiquement :

:nth-child
(n-ième enfant)

Cette pseudo-classe est une version plus globale de :first-child et :last-child. Avec :nth-child, vous pouvez calculer l’élément enfant que vous souhaitez cibler.

Par exemple, si vous souhaitez cibler le deuxième enfant, vous devez utiliser :nth-child(2) :

li:nth-child(2){ background: violet;}

odd and even
(impair et pair)

Bien que l’utilisation d’un nombre soit simple, :nth-child est donné avec 2 mots-clés :

• :nth-child(odd) ciblera tous les éléments impairs
• :nth-child(even) ciblera tous les éléments pairs

li:nth-child(odd){ background: gold;}

The n iterator
(L’itérateur n)

L’aspect le plus puissant de :nth-child est la façon dont il peut cibler des éléments basés sur des calculs à l’aide du mot clé n.

La valeur n incrémente de zéro  0 au nombre d’éléments enfants présents.

Et si vous voulez cibler chaque troisième élément ?

li:nth-child(3n) { background: hotpink;}

Dans notre cas, n commence à zéro et se termine à six.

Les ordinateurs commencent à compter à zéro. Et comme il y a sept éléments dans notre liste, nous allons monter jusqu’à six, car 0-1-2-3-4-5-6 représente sept éléments.

Vous pouvez lire :nth-child(3n) comme «Ciblez chaque élément dont la position est divisible par 3». Dans notre cas, il ciblait à la fois les 3ème et 6ème éléments de la liste :

• 3 times 0 = zéro
• 3 times 1 = le 3ème élément
• 3 times 2 = le 6ème élément

n + 1

Que faire si vous souhaitez cibler le premier élément et tous les trois éléments ensuite ?

li:nth-child(3n+1) { background: limegreen;}

Le 3n+1 a deux parties :

• 3n sélectionne chaque 3ème élément
• +1 décale le début de 1

Voici comment les calculs ont été traités :

• 3 fois 0 plus 1 = 1
• 3 fois 1 plus 1 = 4
• 3 fois 2 plus 1 = 7

L’itérateur n est très polyvalent. Il est difficile de trouver le bon calcul, alors testez-le pour trouver le bon choix.

Autres pseudo-classes

Des dizaines de pseudo-classes sont disponibles, certaines pour des états très spécifiques. Les plus utilisés sont ceux que nous avons abordés.