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>

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 sélecteur 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 crochets :

/* 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

• Cours développement web
• Cours 1.1. Histoire d'Internet
• Cours 1.2. Introduction au HTML
• Cours 1.3. Les caractères spéciaux en HTML
• Cours 1.4. Les commentaires en HTML
• Cours 1.5. Structure globale d'une page HTML
• Cours 1.6. Les liens hypertextes en HTML
• Cours 1.7. L'attribut id en HTML
• Cours 1.8. Les ancres en HTML
• Cours 1.9. Les images dans les pages HTML
• Cours 1.10. Les tableaux en HTML
• Cours 1.11. Les balises HTML les plus utilisées
• Cours 1.12. Quelques recommandations
• Cours 1.13. Ressources
• Cours 2.1. Introduction au CSS
• Cours 2.2. CSS en ligne
• Cours 2.3. CSS dans l'en-tête de la page
• Cours 2.4. CSS dans un fichier externe
• Cours 2.6. Les couleurs en CSS
• Cours 2.7. Les marges en CSS
• Cours 2.8. Les unités en CSS
• Cours 2.9. Les propriétés CSS les plus utilisées
• Cours 3.1. Histoire du JavaScript
• Cours 3.2. Hello World en JavaScript
• Cours 3.3. Console.log
• Cours 3.4. Les commentaires en JavaScript
• Cours 3.5. Les variables en JavaScript
• Cours 3.6. Les événements en JavaScript
• Cours 3.7. Document Object Model (DOM)
• Cours 3.8. Modifier le HTML
• Cours 3.9. Les frameworks JavaScript
• Cours 4.1. Introduction au PHP
• Cours 4.2. Les balises PHP
• Cours 4.3. Les variables en PHP
• Cours 4.4. isset vs empty vs is_null
• Cours 4.5. Les opérateurs en PHP
• Cours 4.6. Les guillemets en PHP
• Cours 4.7. Les tests en PHP, l'instruction if...else
• Cours 4.8. Les tableaux en PHP
• Cours 4.9. Les boucles en PHP
• Cours 4.10. Les sessions en PHP
• Cours 5.1. Les formumlaires HTML
• Cours 5.2. Les formulaires : POST ou GET
• Cours 5.3. Le champ <input>
• Cours 5.4. Les différents champs des formulaires HTML
• Cours 6.1. Introduction à MySQL
• Cours 6.2. phpMyAdmin
• Cours 6.3. Requêtes SQL les plus utilisées
• Cours 6.4. Connexion MySQL en PHP
• Cours 6.5. Les requêtes MySQL en PHP
• Cours 6.6. Lire des données MySQL en PHP
• Cours 6.7. Récupérer le dernier identifiant MySQL

---