Sélecteurs CSS

Quelques sélecteurs CSS de base

Il existe plusieurs niveaux de sélecteurs en CSS, qui nous permettent de développer des feuilles de style aussi simples qu'aussi complexes que nos besoins le requierent.

Au fil de la session, nous verrons plusieurs types de sélecteurs. En voici quelques uns de base :

Sélecteur universel

Le sélecteur * permet d'associer un style à toutes les balises HTML, sans exception.

Exemple :

* {
     font-family: "Arial", "sans-serif"; 
     color: white;  
}

Ici, on indique que toutes les balises doivent adopter la police Arial sans-serif et la couleur du texte doit être blanc.

Sélecteur de balise

Il arrive qu'on veuille que toutes les balises d'un même type aient un style unifié. On peut alors utiliser le nom de balise comme sélecteur.

Exemple :

p {
     font-family: "Arial", "sans-serif"; 
     color: white;  
}

Ici, on indique que tous les paragraphes doivent adopter la police Arial sans-serif et la couleur du texte doit être blanc.

Sélecteur de groupe

De même, on peut aussi dresser une liste des balises qui doivent adopter le même style, à l'aide de la virgule.

Exemple :

p, ol, ul {
     font-family: "Arial", "sans-serif"; 
     color: white;  
}

Ici, on indique que tous les paragraphes, toutes les listes ordonnées et toutes les listes à puce doivent adopter la police Arial sans-serif et la couleur du texte doit être blanc.

Sélecteur d'identifiant

Il arrive qu'on veuille associer un style à une balise bien précise et que ce style ne puisse s'appliquer ailleurs. On utilise alors un identifiant.

Ceci implique que dans la page HTML, la balise ait un identifiant :

<p id="rouge">Ce paragraphe est identifié par un élément unique.</p>

Par la suite, dans le CSS, on peut faire référence à cet identifiant et y appliquer du style, grâce au caractère # placé devant le mot-clé :

#rouge {
     background-color : red;
}

Ici, seul l'unique paragraphe ayant l'identifiant rouge se verra attribuer une couleur de fond.

Sélecteur de classe

Le style associé à un identifiant s'applique à une seule occurence dans une page. Alors, si on veut attribuer le même style à quelques occurences d'une même balise, ou encore à quelques occurences de différentes balises, on peut dans ce cas utiliser le sélecteur de classe.

De la même façon que l'identifiant, en HTML, les balises pour lesquelles on veut définir le style auront à avoir la même classe associée :

<p class="rouge-vert">Ce paragraphe aura un fond rouge avec du texte en vert, de même que la liste qui suit.</p>

<ul class="rouge-vert">
     <li>Chat</li>
     <li>Chien</li>
</ul>

Ensuite, dans le CSS, on peut faire référence à cette classe à l'aide du caractère . placé devant le nom de la classe :

.rouge-vert {
     background-color: red;
     color: green;
}