Mozilla's getting a new look. What do you think? https://mzl.la/brandsurvey

Les sélecteurs

 

Cette page explique comment appliquer des styles de manière sélective, et les priorités des différents types de sélecteurs.

Vous ajouterez quelques attributs aux balises de votre document exemple, et vous utiliserez ces attributs dans votre feuille de style.

Information : les sélecteurs

CSS a sa propre terminologie pour décrire le langage CSS. Précédemment dans ce tutoriel, vous avez créé une ligne dans votre feuille de style comme ceci :

strong {color: red;}

Dans la terminologie CSS, toute cette ligne est une règle. Cette règle commence avec strong, qui est un sélecteur. Celui-ci sélectionne les éléments dans le DOM sur lesquels la règle va s'appliquer.

Plus de détails
La partie à l'intérieur des crochets courbes est la déclaration.

Le mot-clé color est une propriété, et red est une valeur.

Le point virgule après la valeur de propriété sépare celle-ci d'autres paires de propriétés/valeurs pour le même sélecteur.

Ce tutoriel se réfère à un sélecteur comme strong comme à un sélecteur de balise. La spécification CSS s'y réfère comme à un sélecteur de type.


Cette page du tutoriel donne plus de détails sur les sélecteurs utilisables dans les règles CSS. Outre les noms de balise, il est possible d'utiliser des valeurs d'attribut dans les sélecteurs. Cela permet au règles d'être plus spécifiques.

Deux attributs ont un statut spécial pour CSS. Ce sont les attributs class et id.

Utilisez l'attribut class dans une balise pour lui assigner une classe nommée. Vous pouvez choisir le nom qui vous convient pour cette classe.

Dans votre feuille de style, entrez un point avant le nom de la classe lorsque vous l'utilisez dans un sélecteur.

Utilisez l'attribut id dans une balise pour lui assigner un identifiant unique. Vous pouvez choisir le nom qui vous convient pour l'identifiant. Celui-ci doit cependant être unique au sein du document.

Dans votre feuille de style, entrez un signe dièse (carré) avant l'identifiant lorsque vous l'utilisez dans un sélecteur.

Exemples
Cette balise HTML a à la fois un attribut class et un attribut id :
<P class="clef" id="principale">

L'identifiant, principale, doit être unique dans le document, mais d'autres balises dans le document peuvent avoir le même nom de classe, clef.

Dans une feuille de style CSS, cette règle rend tous les éléments de la classe clef verts. (Ils peuvent ne pas tous être des éléments P .)

.clef {color: green;}

Cette règle rend l'élément avec l'identifiant principale gras :

#principale {font-weight: bolder;}

Si plus d'une règle s'applique à un élément et spécifie la même propriété, CSS donne la priorité à la règle ayant le sélecteur le plus spécifique. Un sélecteur id est plus spécifique qu'un sélecteur de classe, qui lui-même est plus spécifique qu'un sélecteur de balise.

Plus de détails
Vous pouvez également combiner le sélecteurs, afin de créer un sélecteur plus spécifique.

Par exemple, le sélecteur .clef sélectionne tous les éléments qui ont le nom de classe clef. Le sélecteur p.clef sélectionne seulement les éléments P qui ont le nom de classe clef.

Vous n'êtes pas limité aux deux attributs spéciaux class et id. Vous pouvez spécifier d'autres attributs en utilisant des crochets droits. Par exemple, le sélecteur [type=button] sélectionne tous les éléments qui ont un attribut type avec la valeur button.

Une prochaine page de ce tutoriel, (Tableaux) a des informations sur les sélecteurs complexes basés sur les relations.

Pour une information complète sur les sélecteurs, consultez Selectors dans la spécification CSS.


Si la feuille de style a des règles conflictuelles et qui sont également spécifiques, alors CSS donne la priorité à la règle qui est définie plus tard dans la feuille de style.

Lorsque vous avez un problème de conflit de règles, essayez de le résoudre en rendant une des règles plus spécifique, afin qu'elle aie la priorité. Si vous ne pouvez pas faire cela, essayez de déplacer l'une des règles plus près de la fin de la feuille de style pour lui donner la priorité.

Action : utilisation des sélecteurs class et id

Éditez votre fichier HTML, et dupliquez le paragraphe par copier-coller. Ajoutez ensuite des attributs id et class à la première copie, et un autre id à la seconde copie comme montré ci-dessous. Sinon, copiez et collez à nouveau l'entièreté du fichier :

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<HTML>
  <HEAD>
  <TITLE>Document exemple</TITLE>
  <LINK rel="stylesheet" type="text/css" href="style1.css"></strong>
  </HEAD>
  <BODY>
    <P id="premier">
      <STRONG class="carotte">C</STRONG>ascading
      <STRONG class="epinard">S</STRONG>tyle
      <STRONG class="epinard">S</STRONG>heets
    </P>
    <P id="second">       <STRONG>C</STRONG>ascading       <STRONG>S</STRONG>tyle       <STRONG>S</STRONG>heets     </P>
  </BODY>
</HTML>

Éditez à présent votre fichier CSS. Remplacez l'entièreté de son contenu par :

strong {color: red;}
.carotte {color: orange;}
.epinard {color: green;}
#premier {font-style: italic;}

Actualisez dans votre navigateur et voyez le résultat :

Cascading Style Sheets
Cascading Style Sheets

Vous pouvez essayer d'ordonner différemment les lignes dans votre fichier CSS pour constater que leur ordre n'a aucune importance.

Les sélecteurs de classe .carotte et .epinard ont priorité sur le sélecteur de balise strong.

Le sélecteur d'id #premier a priorité sur les sélecteurs de classe et de balise.

Challenges
Sans modifier votre fichier HTML, ajoutez une seule règle à votre fichier CSS qui garde la même couleur pour toutes les lettres initiales que précédemment, mais rend le reste du texte du second paragraphe bleu :
Cascading Style Sheets
Cascading Style Sheets

À présent, changez la règle que vous venez d'ajouter (sans rien changer d'autre), pour rendre le premier paragraphe bleu également :

Cascading Style Sheets
Cascading Style Sheets

 

Pour continuer

Si vous avez eu des difficultés à comprendre cette page, ou avez d'autres commentaires à son sujet, n'hésitez pas à contribuer à sa page de discussion.

Votre feuille de style d'exemple commence à avoir l'air dense et compliquée. La page suivante décrit des façons de rendre CSS plus facile à lire : Des CSS lisibles

Étiquettes et contributeurs liés au document

Étiquettes : 
 Contributeurs à cette page : teoli, grandoc, R greg, Mgjbot, Verruckt, BenoitL, Mozinet, Christian13
 Dernière mise à jour par : teoli,