Selectors — class and id · Selecteurs — class et id
This page needs a recent browser (with SharedArrayBuffer support). Please update Chrome, Edge, Firefox or Safari to the latest version. · Cette page nécessite un navigateur récent (avec support SharedArrayBuffer). Veuillez mettre à jour Chrome, Edge, Firefox ou Safari vers la dernière version.
English
Three kinds of selector
- A selector says which elements a rule changes.
- By tag:
p { ... }changes every<p>. - That is the kind you used last lesson.
Français
Trois types de sélecteurs
- Un sélecteur indique quels éléments une règle modifie.
- Par balise :
p { ... }change tous les<p>. - C'est le type que vous avez utilisé lors de la dernière leçon.
English
By class and by id
- By class:
.note { ... }changes every element withclass="note". A dot.means class. - By id:
#title { ... }changes the one element withid="title". A hash#means id. - A class can be on many elements; an id should be on one.
Français
Par classe et par id
- Par classe :
.note { ... }change chaque élément ayantclass="note". Un point.signifie classe. - Par id :
#title { ... }change l'un seul élément ayantid="title". Un dièse#signifie id. - Une classe peut être sur plusieurs éléments ; un id doit être sur un seul.
<style>
.note { color: green; }
#title { color: purple; }
</style>
<h1 id="title">My page</h1>
<p class="note">This is a note.</p>
<p>This is normal.</p>
English
Common mistakes
- A class selector starts with
., an id selector with#. - Reuse a class on many elements; an id appears once per page.
Français
Erreurs courantes
- Un sélecteur de classe commence par
., un sélecteur d'id commence par#. - Réutilisez une classe sur plusieurs éléments ; un id n'apparaît qu'une fois par page.
English
Now you try
- Match the dot
.to a class, and the hash#to an id. - Style a class, then style an id.
Français
À vous maintenant
- Correspondez le point
.à une classe, et le dièse#à un id. - Stylisez une classe, puis stylisez un id.
Style the note. Add a rule for the note class: .note { color: green; } (a dot means class). · Stylez la note. Ajoutez une règle pour la classe note : .note { color: green; } (un point signifie une classe).
Style the title. Add a rule for the title id: #title { color: purple; } (a hash means id). · Stylez le titre. Ajoutez une règle pour l'id title : #title { color: purple; } (un dièse signifie un id).