Exercice 1 : Survol et clic

Créez un bouton qui change de couleur de fond au survol et devient rouge lorsqu'il est cliqué.

Indice : Utilisez les pseudo-classes :hover et :active. 

<style>
    /* Votre code CSS ici */
</style>

<button>Cliquez-moi</button>

Corrigé :

<style>
    button {
        padding: 10px 20px;
        background-color: lightblue;
        border: none;
        cursor: pointer;
    }
    button:hover {
        background-color: lightgreen;
    }
    button:active {
        background-color: red;
    }
</style>

Explication : :hover s'applique au survol, :active lors du clic.

Exercice 2 : Focus

Créez un champ de texte qui change de bordure lorsqu'il reçoit le focus.

Indice : Utilisez la pseudo-classe :focus. 

<style>
    /* Votre code CSS ici */
</style>

<input type="text" placeholder="Tapez ici">

Corrigé :

<style>
    input[type="text"] {
        padding: 8px;
        border: 1px solid #ccc;
    }
    input[type="text"]:focus {
        border: 2px solid blue;
    }
</style>

Explication : :focus s'applique lorsque l'élément est sélectionné.

Exercice 3 : Enfant

Ciblez le deuxième élément d'une liste et changez sa couleur.

Indice : Utilisez la pseudo-classe :nth-child. 

<style>
    /* Votre code CSS ici */
</style>

<ul>
    <li>Premier élément</li>
    <li>Deuxième élément</li>
    <li>Troisième élément</li>
</ul>

Corrigé :

<style>
    li:nth-child(2) {
        color: orange;
    }
</style>

Explication : :nth-child(2) cible le deuxième enfant.

Exercice 4 : Premier et dernier enfant

Ciblez le premier et le dernier élément d'une liste et changez leur style.

Indice : Utilisez les pseudo-classes :first-child et :last-child. 

<style>
    /* Votre code CSS ici */
</style>

<ol>
    <li>Premier</li>
    <li>Deuxième</li>
    <li>Troisième</li>
</ol>
  1. Premier
  2. Deuxième
  3. Troisième

Corrigé :

<style>
    li:first-child {
        font-weight: bold;
    }
    li:last-child {
        font-style: italic;
    }
</style>

Explication : :first-child et :last-child ciblent respectivement le premier et le dernier enfant.

Exercice 5 : Liens

Stylez les liens non visités en bleu et les liens visités en violet.

Indice : Utilisez les pseudo-classes :link et :visited. 

<style>
    /* Votre code CSS ici */
</style>

<a href="https://example.com">Lien vers Example</a>
Lien vers Example

Corrigé :

<style>
    a:link {
        color: blue;
    }
    a:visited {
        color: purple;
    }
</style>

Explication : :link cible les liens non visités, :visited les liens déjà visités.

Retourner aux exercices