FriconiX
Des milliers de pictogrammes gratuits dessinés avec amour !

Cours 2.5. Les sélecteurs en CSS

Sélecteurs de type

Dans la syntaxe suivante, h1 est un sélecteur de type. Il permet de spécifier que le style s'appliquera à toutes les balises <h1>

Syntaxe du style CSS interne

Le sélecteur de type se spécifie simplement en écrivant le nom des balises ciblées. Par exemple :

/* Style des balises <h1> */
h1 { text-align: center; }

/* Style des balises <p> */
p { color:red; }

Il est possible de spécifier plusieurs sélecteurs en les séparant par des virgules :

/* Style des balises <h1> et <h2>*/
h1, h2 { text-align: center; }

Sélecteur d'identifiant

Le sélecteur d'identifiant (#monIdentifiant) permet de sélectionner la balise portant un identifiant donné. On rappelle qu'un identifiant doit être unique sur la page. En CSS, ce sélecteur se définit en faisant précéder le nom de l'identifiant par # :

/* Style de la balise identifiée par monId */
#monId { color:red; }

Sélecteur de classe

Le sélecteur de classe (.maClasse) permet de cibler toutes les balises appartenant à une classe donnée. Une classe se définit en HTML à l'aide de l'attribut class="" :

<div class="maCLasse">Exemple de division appartenant à la classe 'urgent'</div>

L'avantage du sélecteur de classe est pouvoir cibler certaines balises, indépendament de leur type. Ce sélecteur se définit en faisant précéder le nom de la classe par un point. Voici un exemple :

/* Style de la classe maCLasse */
.maCLasse { color:red; }

Le selecteur d'attribut

Le sélecteur d'attribut ([monAttribut]) permet de cibler toutes les balises possédant un attribut donné. Sa syntaxe est le nom de l'attribut entre crochés :

/* Toutes les balises avec l'attribut title */
[title] { color:red; }

Le sélecteur d'attribut ([monAttribut=maValeur]) permet de façon optionnelle de spécifier une valeur particulière pour cet attribut. Voici un exemple :

/* Toutes les titres de valeur cat */
[title=cat] { color:red; }

Le sélecteur universel

Le sélecteur universel * cible toutes les balises d'un document :

/* Toute le contenu en rouge */
* { color:red; }

Combinaison des sélecteurs

Nous n'entrerons pas dans les détails ici, mais sachez qu'il est possible de combiner les sélecteurs entre eux. La syntaxe du CSS est très puissante et possède de nombreuses fonctionnalités. Voici à titre illustratif un exemple qui permet de sélectionner toutes les balises de type <a> possédant un attribut de type href="" dont la valeur commence par https://lucidar.me :

a[href^="https://lucidar.me"] { color:red; }

Le jour où vous aurez besoin de ce type de sélecteurs, vous trouverez de nombreux sites exposant leur fonctionnement.

Choix d'un sélecteur

Le choix d'un sélecteur dépend de nombreux facteurs (structure de la page, habitudes du développeur, bibliothèques utilisées ...). La stratégie de sélection vient avec la pratique et l'expérience. Lorsque cela est possible, privilégiez les sélecteurs de type. Si ce dernier n'est pas approprié, vous devez vous poser la question du lien entre le style et le contenu. Pour les mises en forme élémentaires, les sélecteurs de classe sont très fréquemment utilisés.

Voir aussi


Dernière mise à jour : 16/11/2019