Les sélecteurs CSS

L’une des grandes forces du CSS réside dans le fait qu’on va pouvoir cibler très précisément tel ou tel élément HTML grâce à la grande variété de ces sélecteurs.

Dans cette leçon, nous allons déjà apprendre à manipuler les sélecteurs qui vont nous permettre de sélectionner un élément HTML.

Voyons tout de suite à quoi ressemble du code CSS 3, en commençant simplement :

h2 { 
   font-style: bold; 
   background-color: #cccccc; 
   color: #097B6B; 
}

Ici, vous avez utilisé un sélecteur de balise. Sur votre page HTML, dès que vous utiliserez la balise h2 pour mettre un titre de niveau 2, la même mise en forme sera appliquée : le texte sera en gras, sur un arrière-plan de couleur #cccccc et le texte sera lui aussi en couleurs, mais avec une valeur #097B6B.

Autre exemple, les sélecteurs de classe :

.txtItalic { font-style : italic; }

Un sélecteur de classe se décrit en commençant par un point suivi de son nom. Choisissez un nom suffisamment parlant pour éviter de rechercher le code CSS pour connaître la mise en forme. Puis, vous définissez une classe txtItalic dont la seule utilité est de mettre le texte en italique.

Dans la page HTML, vous l’appliquerez grâce à l’attribut class dans des balises telles que div, span, p, etc. :

<span class="txtItalic">Texte en italique</span>

Notez que là, vous ne mettez pas le point avant le nom de classe.

Il faut savoir qu’une même classe, vous pouvez l’appeler plusieurs fois, dans plusieurs div différents, plusieurs pages, plusieurs paragraphes, autant de fois que vous voulez.

Continuons avec un troisième cas et un troisième exemple :

#txtCenter { text-align: center; }

C’est un sélecteur d’identifiant, là c’est un dièse au lieu d’un point avant le nom de la classe. #le nom de l’identifiant et vos propriétés CSS, dans div ou dans span ou dans p, vous utilisez un id, avec le nom de cet identifiant pour appliquer le style CSS :

<div id="txtCenter">Texte centré par sélecteur d'identifiant</div>

Rappelez-vous que vous pouvez appeler les classes CSS autant de fois que vous le souhaitez dans un document HTML. Mais avec un identifiant, vous ne pouvez les appeler qu’une seule fois, bien évidemment rien ne vous empêche de le mettre plusieurs fois, mais votre code HTML ne sera pas valide W3C. L’identifiant est fait pour n’être appelé qu’une seule fois dans votre document HTML, après tout, c’est un identifiant.

Voila, vous avez les différents sélecteurs en CSS qui vous seront très utiles, vous allez vous en servir tout le temps !