CSS3 – Les Pseudo-classes

LEÇON

 

Qu'est-ce qu'une pseudo-classe ?

On utilise une pseudo-classe pour appliquer des styles sur un élément quand il est dans un certain état.

Par exemple, pour appliquer des styles sur un élément quand :

  • il reçoit le focus / devient le champ actif d'entrée (pseudo-classe focus)
  • il est survolé par la souris (pseudo-classe hover)
  • il est désactivé (pseudo-classe disabled)
  • c'est un lien déjà visité (pseudo-classe visited)
  • et cetera (voir la liste complète sur MDN)

 

Syntaxe

La syntaxe pour appliquer des styles vie une pseudo-classe :

 

sélecteur:pseudo-classe
{
  propriété:valeur;
  propriété:valeur;
  ...
}

 

Exemples

a:hover
{
  color:orange;
}

input:focus
{
  border:5px solid orange;
}

a.nav:visited
{
  color:pink;
}

#menu1 a.nav:hover, #menu2 a.nav:hover
{
  color:red;
}

 

Pseudo-classes pour les liens

Exemple

body
{
  width:960px;
  margin:0 auto;
  background-color:black;
  color:white;
  font-family:sans-serif;
}

#navigation-links
{
  float:left;
  width:300px;
  background-color:#202020;
  min-height:500px;
  margin:0px 30px 0px 0px;
}

a
{
  display:block;
  font-weight:bold;
  padding:5px 15px;
  margin:20px;
}

a:link
{
  background-color:slategray;
  color:white;
}

a:visited
{
  background-color:darkslategray;
  color:#c0c0c0;
}

a:hover
{
  background-color:red;
  color:yellow;
}

 

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>Pseudo-classes</title>
        <link rel="stylesheet" type="text/css" href="style.css">
    </head>
    <body>
      <div id="navigation-links">
        <a href="https://developer.mozilla.org/fr/docs/Web/CSS/Pseudo-classes" target="_blank">MDN Les pseudo-classes</a>
        <a href="https://developer.mozilla.org/fr/docs/Web/CSS/:hover" target="_blank">MDN Pseudo-classe hover</a>
        <a href="https://developer.mozilla.org/fr/docs/Web/CSS/:visited" target="_blank">MDN Pseudo-classe visited</a>
        <a href="https://developer.mozilla.org/fr/docs/Web/CSS/:focus" target="_blank">MDN Pseudo-classe focus</a>
        <a href="https://developer.mozilla.org/fr/docs/Web/CSS/:enabled" target="_blank">MDN Pseudo-classe enabled</a>
      </div>
      <h1>Lorem ipsum dolor sit amet</h1>
      <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur ut gravida nunc. Donec at tellus quis eros euismod varius. Pellentesque venenatis tortor nunc, ornare pellentesque elit ultrices sed. Vivamus ultricies eu lorem vitae dictum. Nullam commodo vitae justo ac volutpat. Pellentesque vestibulum posuere metus, sit amet euismod odio viverra at.
      </p>
      <p>
        Nam et erat augue. In risus elit, venenatis at est eget, hendrerit molestie nisi. Vivamus semper vestibulum augue sit amet dignissim. Nulla id tempus augue. Sed luctus sem sit amet turpis pellentesque, id vehicula erat porta.
      </p>
      <p>
        Aliquam eu consectetur nisl, nec sagittis nisi. Duis justo enim, congue non velit egestas, pharetra accumsan turpis. Duis euismod non nisi et eleifend.
      </p>
      <p>
        Cras placerat vel est vel fringilla. Nullam cursus lacus eu dui aliquet, venenatis pulvinar metus sodales. Donec gravida ultrices massa iaculis commodo. Mauris dignissim facilisis iaculis. Sed ullamcorper nunc in mi finibus semper. In ante magna, tempus sit amet condimentum et, auctor ut velit. Nullam luctus orci sem, consequat vulputate ipsum tristique at.
      </p>
      <p>
        Sed aliquam augue at pharetra iaculis. Sed condimentum non neque non scelerisque. Quisque nec lacus eu nulla lobortis feugiat a sit amet lorem.
      </p>
    </body>
</html>

 

Mini-exercice

  • Reproduire les fichiers de l'exemple ci-dessus et ouvrir la page dans un navigateur
  • Remarquer que le style des liens à gauche change quand on les survole
  • Remarquer que le style des liens à gauche change quand on les visite
  • Modifier le css et déplacer les styles de la pseudo-classe visited de façon qu'ils apparaissent après les styles de la pseudo-classe hover
  • Cette modification change quoi au niveau de l'affichage de la page ?

 

First-child, nth-child, last-child

Exemple

body
{
  width:960px;
  margin:0 auto;
  background-color:black;
  color:white;
  font-family:sans-serif;
}

#navigation-links
{
  float:left;
  width:300px;
  background-color:#202020;
  min-height:500px;
  margin:0px 30px 0px 0px;
}

a
{
  display:block;
  font-weight:bold;
  padding:5px 15px;
  margin:20px;
}

a:link, a:visited
{
  background-color:slategray;
  color:white;
}

a:first-child
{
  background-color:pink;
}

a:nth-child(even)
{
  background-color:darkslategray;
}

a:hover
{
  background-color:red;
  color:yellow;
}

 

Mini-exercice

  • Reproduire l'exemple ci-dessus (utiliser le fichier HTML du premier exemple)
  • Remarquer la couleur de fond du premier élément dans le menu
  • Remarquer la couleur de fond des éléments dans le menu en position paire / impaire
  • Modifier a:nth-child(even) en a:nth-child(odd) puis rouvrir la page et remarquer la différence
  • Mettre la définition a:nth-child(odd) avant la définition a:first-child puis rouvrir la page et remarquer la différence
  • Créer des styles pour le dernier élément (utiliser a:last-child)

 


 

EXERCICES

Créer une page (un fichier HTML et un fichier CSS) qui exploite les pseudo-classes pour afficher :

  1. une table où les lignes paires et impaires ont une couleur de fond différente.
  2. un formulaire où le champ actif a un fond vert et un cadre jaune.
  3. un lien qui prend une autre couleur de fond et une autre couleur de texte pour le temps du clic (entre l'appui et relâchement du bouton de la souris) - astuce : utiliser a:active et le mettre après a:hover.
  4. un formulaire où les champs textes obligatoires ont un cadre rouge - astuce : il faut mettre required="true" dans la balise input pour les champs obligatoires.
  5. un menu de navigation à deux niveaux dans une colonne à droite. Les éléments dans les sous-menus doivent être décalés par rapport à leurs parents.