Pseudo-classes et pseudo-éléments — Correction d'exercices

Voici des propositions de solutions en mode console (via readline()). N’hésite pas à les adapter.

#1 — Survol (Hover)

Change la couleur d'un lien en rouge lorsqu'on passe la souris dessus.

Voir le corrigé

a:hover {
    color: red;
}

Cible le premier élément <li> d'une liste.

Voir le corrigé

li:first-child {
    color: green;
}

Mets un fond gris sur toutes les lignes paires d'un tableau.

Voir le corrigé

tr:nth-child(even) {
    background-color: #eee;
}

Ajoute un symbole '» ' avant chaque élément de liste.

Voir le corrigé

li::before {
    content: "» ";
}

Ajoute une bordure bleue épaisse à un champ input lorsqu'il est cliqué (focus).

Voir le corrigé

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