CSS (Cascading Style Sheets)

Auteur: Mohamed CHINY Durée necessaire pour le cours de CSS (Cascading Style Sheets) Niveau recommandé pour le cours de CSS (Cascading Style Sheets) Supports vidéo non disponibles pour ce cours Exercices de renforcement disponibles pour ce cours Quiz disponible pour ce cours

Page 9: Sélecteurs spéciaux

Toutes les pages

Groupement et identification d'éléments

J'ai préféré vous montrer, dans cette page, les différents sélecteurs d'éléments existants avant d'aller plus loin en CSS et voir des styles plus avancés.

Jusqu'ici, pour désigner un élément à styler en CSS on s'est servi du sélecteur de balise. Le navigateur applique donc le style à toutes les balises qui portent le même nom que le selecteur.

Exemple:
div{
   color:#888888;
   text-decoration:underline;
}

Dans ce cas, le navigateur parcourt toute la page en cherchant les balises <div> auxquelles il appliquera le style décrit par le sélecteur. Alors, le contenu de toutes les <div> sera gris et souligné. Mais, est ce qu'on souhaite vraiment que toutes les <div> de cette page soient ainsi? Sinon, comment distinguerons nous les balises auxquelles on appliquera ce style de celles qui n'en sont pas concernées?

Heureusement, il n'y a pas que le sélecteur de balise qui peut désigner l’élément. Il y a aussi le sélecteur de classe et l'identifiant d'élément.

L'attribut class: Groupement d'éléments

En HTML, il existe un attribut qui est très sollicité en CSS il s'agit de l'attribut class. Cet attribut peut avoir comme valeur un nom de votre choix et peut être appliqué à toutes les balises HTML déclarées entre <body> et </body>. On peut appliquer le même nom de classe à plusieurs éléments similaires ou non. Cet ensemble d'éléments constitue un groupement d'éléments.

Exemple du code HTML utilisant les classes:
<h1 class="titre"></h1>
<nav class="menu"></nav>
<div class="contenu"></div>
<article>
   <div class="meteo"></div>
   <div class="rss"></div>
</article>
Dans ce code, nous disposons de trois balises <div>. Si on utilisait le sélecteur de balise pour leur appliquer un style il se ressembleraient toutes. Donc nous allons faire appel au sélecteur de classes qu'on a déjà défini sur chacune des balises. Pour définir un style qui s'applique à une classe on déclare la syntaxe suivante:
.contenu{
   /* Style de la première DIV */
}
.meteo{
   /* Style de la deuxième DIV */
}
.rss{
   /* Style de la troisième DIV */
}
Vous avez compris comment ça fonctionne. C'est grâce au point qui vient juste avant le nom de la classe. De cette manière, la navigateur comprend qu'il doit appliquer le style à la balise qui renferme la classe dont le nom est défini en tant que sélecteur. C'est ainsi qu'on peut appliquer des styles différents aux balises même si elles portent le même nom. Mieux encore, on peu appliquer le même style aux balises différentes car ils ont la même classe.
On peut donner deux (ou plusieurs) noms de classe en même temps à la même balise comme ceci class="classe1 classe2". Il faut séparer les noms par un espace. De cette manière la balise aura les styles de la classe1 et de la classe2 simultanément.

Attribut id: identifiant d'élément

Si une classe peut être déclarée plusieurs fois dans le même document pour constituer un groupement d'éléments (qui accueilleront le même style), il existe un autre attribut HTML qui, quant à lui, ne doit figurer qu'une seule fois dans le même document. Il s'agit de l'attribut id connu par identifiant d'élément.

Exemple de code utilisant les identifiants:
<img id="logo" />
<div id="slogan"></div>
Si on veut cibler les éléments par leur id afin de leur appliquer un style, le code CSS ressemblerait à ceci:
#logo{
   /* Style de l'image affichant le logo */
}
#slogan{
   /* Style de la DIV qui contient le slogan */
}
Là encore, on utilise le croisillon (confondu à tort avec le dièse) pour sélectionner un élément par le biais de son identifiant.
Notez que le rôle de l'identifiant ne se limite pas au CSS, mais il est très pratique aussi en Javascript.
Autres sélecteurs pratiquesJusqu'ici nous avons vu le sélecteur de balise qui utilise le nom de la balise pour appliquer un style CSS, le sélecteur de classe qui se sert du nom de la classe préfixé par le point et l'identifiant d'élément qui commence par un dièse. Mais ce n'est pas tout. En CSS on peu utiliser d'autres méthodes pour cibler les éléments.

Cibler tous les éléments

Pour cibler tous les éléments d'un document HTML, on utilise le symbole astérisque (*). De cette manière, la balise <body> et toutes les balises qu'elle contient sont concernées par le style.

Exemple:
*{
   color:#888888;
   font-size:10pt;
   font-family:verdana, arial, sans-serif;
}

Cibler tous les éléments ayant un attribut particulier

Pour cibler toutes les balises sur lesquelles on a déclaré un attribut particulier (quelque soit sa valeur) on fait appel au sélecteur de balise suivi de crochets qui renferment le nom de l'attribut souhaité.

Exemple:
img[title]{
   opacity:0.7;
   filter:alpha(opacity=70);
}
Dans ce cas, toutes les balises <img> qui ont un attribut title seront translucides.

Cibler tous les éléments ayant un attribut avec une valeur particulière

Pour cibler toutes les balises sur lesquelles on a déclaré un attribut qui a une valeur bien définie on fait appel au sélecteur de balise suivi de crochets qui renferment le nom de l'attribut souhaité auquel on a attribué la valeur voulue (comme si on le déclarait en HTML).

Exemple:
input[type="text"]{
   border:solid 1px blue;
}
Dans ce cas, toutes les zones de texte auront une bordure normale colorée en bleu.

Cibler un élément contenu dans un autre

Pour cibler un élément contenu dans un autre, on déclare le sélecteur du premier élément suivi d'un espace suivi du sélecteur du deuxième élément. Le sélecteur peut être n'importe lequel parmi ceux vu précédemment (balise, classe, id...).

Exemple:
div img{
   margin:10px;
}
Dans ce cas, toutes les images qui sont déclarées dans une balise <div> auront une marge de 10px de tous les cotés.

Cibler plusieurs éléments à la fois

Pour désigner plusieurs éléments à la fois, il suffit de les déclarer tous séparés par une virgule.
Exemple:
header,footer,nav,section{
   margin:0;
   border:none;
}
Dans ce cas, les balises <header>, <footer>, <nav> et <section> n’auront aucune marge ni aucune bordure.

Ordre d'application des styles

Souvent, on se confronte à un élément dont le style est décrit plusieurs fois. La règles est simple, les propriétés qui ne sont pas répétés d'un style à un autre sont combinées et appliquées toutes à l'élément, par contre, les règles qui se répètent s'annulent les unes par les autres, celles qui sont définies en dernier seront appliquées.