CSS3 – Sélecteurs CSS (class et id)

LEÇON

 

Les 3 types de sélecteur CSS

Les règles CSS sont appliquées aux éléments selon le (ou les) sélecteur(s) spécifiés pour la règle.

Le selecteur d'une règle est ce qui est en dehors des accolades { }.

 

  • Sélecteur de type élément (aussi appelé sélecteur de type balise) :
    • le nom d'une balise, sans préfixe
    • s'applique aux éléments de la balise spécifiée
    • dans cet exemple le sélecteur est p
p
{
  background-color:black;
  color:green;
}

 

  • Sélecteur de type class :
    • préfixé par un point (.)
    • s'applique aux éléments ayant la classe spécifiée
    • dans cet exemple, le sélecteur est .retro
.retro
{
  background-color:black;
  color:green;
}

 

  • Sélecteur de type id :
    • préfixé par un dièse (#)
    • s'applique à l'élément ayant l'identifiant spécifié
    • dans cet exemple le sélecteur est #terminal
#terminal
{
  background-color:black;
  color:green;
}

 

Quel sélecteur utiliser ?

En règle générale, on utilise :

  • un sélecteur de type élément pour les règles applicables à tous les éléments d'une balise
  • un sélecteur de type class pour les règles applicables à un groupe d'éléments (pas obligatoirement les mêmes balises)
  • un sélecteur de type id dans le cas d'un élément spécifique (une page HTML ne devrait jamais avoir 2 éléments avec le même identifiant)

 

Les sélecteurs peuvent être groupés et/ou combinés

Exemples :

  • s'applique
    • aux éléments p
    • et aux éléments h1
p, h1
{
  background-color:black;
  color:green;
}

 

  • s'applique aux éléments p de classe retro uniquement
p.retro
{
  background-color:black;
  color:green;
}

 

  • s'applique à l'élément p avec l'identifiant retro uniquement
p#retro
{
  background-color:black;
  color:green;
}

 

Les sélecteurs hiérarchiques

Le sélecteur hiérarchique n'est pas un 4ème type de sélecteur. C'est plutôt une façon de combiner les sélecteurs pour cibler les éléments selon leur position dans la hiérarchie du document HTML.

Dans l'exemple ci-dessous, la règle s'applique aux éléments p de classe retro qui se trouvent entre une paire de balises ayant pour identifiant #main-wrapper

#main-wrapper p.retro
{
  background-color:black;
  color:green;
}

 

Dans le code HTML suivant, seulement le paragraphe "Lorem ipsum dolor sit amet, consectetur adipiscing elit." est concerné par la règle ci-dessus.

<h1>Exemple</h1>
<div id="main-wrapper">
  <p class="retro">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit.
  </p>
  <p class="modern">
    Vivamus ullamcorper mi a lorem porta suscipit.
  </p>
</div>
<p class="retro">
    Pellentesque varius felis eget orci auctor, sem sollicitudin.
</p>
<p class="modern">
  In et augue fermentum sem tincidunt lobortis.
</p>

 

Sélecteurs hiérarchiques : père-fils direct

Dans le cas ou le selecteur comporte une espace (#main-wrapper p.retro) le fils (p.retro) peut se trouver à un niveau ou à plusieurs niveaux en dessous du père (#main-wrapper) pour être sélectionné.

Pour sélectionner le fils direct uniquement on utilise le symbole >.

Exemple :

#main-wrapper > p.retro
{
  background-color:black;
  color:green;
}

 

<h1>Exemple</h1>
<div id="main-wrapper">
  <p class="retro">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit.
  </p>
  <div class="interne">
    <p class="retro">
      Vivamus ullamcorper mi a lorem porta suscipit.
    </p>
  </div>
</div>

 

Ici, uniquement le paragraphe Lorem ipsum ... est concerné par la règle.

 

 


 

EXERCICES

Créer un fichier CSS avec des règles (pour la couleur de texte par exemple) qui s'applique :

    1. à tout le document (astuce : cibler l'élément body)
    2. aux éléments p
    3. aux éléments td (cellule dans une table)
    4. aux éléments h1, h2 et h3 ensemble (sans répétition des règles)
    5. à tous les éléments de classe "aaa"
    6. à tous les éléments de classe "bbb" et "ccc" ensemble (sans répétition des règles)
    7. aux éléments p de classe "ddd"
    8. aux éléments h1 de classe "eee"
    9. à l'élément identifié par "fff"
    10. à l'élément h4 de classe "ggg" identifié par "hhh"
    11. aux éléments h5 de classe "iii" et à l'élément h6 identifié par "jjj"
    12. aux éléments div
    13. aux éléments div de classe "kkk"
    14. à l'élément div identifié par "mmm"
    15. aux éléments p de classe "nnn" qui se trouvent dans un div
    16. aux éléments p de classe "ooo" qui se trouvent dans un div de classe "ppp"
    17. aux éléments p de classe "qqq" qui sont fils direct d'un div identifié par "rrr"
    18. dans ces 3 cas (sans répétition des règles) :
      • éléments h5 de classe "sss"
      • éléments p de classe "ttt" qui se trouvent dans un div de classe "uuu"
      • tous les éléments de classe "vvv"

Puis créer un document HTML qui démontre l'application de toutes les règles spécifiées.

 

(Bonus) 19. Regarder le code HTML ci-dessous. De quelle couleur sera affichée chaque ligne ? Essayer de déduire la solution avant d'essayer dans un navigateur.

 

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>Test</title>
        <style>
		  body { color:black; font-size:2.0em; font-weight:bold; }
		  .maclasse { color:red; }
		  #monid { color:green; }
		</style>
    </head>
    <body>
        <p>
            1. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
        </p>
		<p class="maclasse">
            2. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
        </p>
		<p id="monid">
            3. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
        </p>
		<p class="maclasse" id="monid">
            4. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
        </p>
		<p id="monid" class="maclasse">
            5. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
        </p>
		<div class="maclasse">
		  <p>
            6. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
          </p>
		  <p id="monid">
            7. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
          </p>
		</div>
		<div id="monid">
		  <p>
            8. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
          </p>
		  <p class="maclasse">
            9. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
          </p>
		</div>
    </body>
</html>