Les différents types de sélecteur
CSS permet de positionner des règles dans des sélecteurs.
Un sélecteur permet d'identifier dans une page HTML les objets qui se verront appliquer les règles positionnées.
Syntaxe
Pour rappel, l'ensemble des règles d'un selecteur sera entouré par des accolades { pour indiquer le début des règles et } pour la fin des règles.
selecteur {
...règles...
}
Les différents types de sélecteur
Il y a 3 types de sélecteur:
- Les sélecteurs de type "balise" HTML. Dans ce cas, vous indiquez les balises comme selecteur.
p {
propriété:valeur
}
On pourra viser plusieurs balises en une seule fois
Par exemple:
p, h1 {
...
}
- Sélecteur de type "identifiant" (l'id que tous les langages côté client peuvent utiliser pour accéder à un objet).
#id {
...
}
où id est le nom que vous aurez donné à votre objet
Par exemple, dans un fichier HTML:
<div id="apHead">
</div>Dans le CSS:
#apHead{
...
}
- Sélecteur de type "classe"
Dans un fichier HTML, vous pouvez indiquer que plusieurs types de balises appartiennent à une même classe via l'attribut class
Par exemple dans HTML : <p class "maclasse"> ... </p>
Pour viser tous les objets de la classe "maclasse" dans le fichier CSS, il suffit d'indiquer le nom de la classe précédé d'un point :
.maclasse {
color:red;
}
On notera
qu'il sera tout à fait possible de mixer différents types de sélecteurs lorsque
les règles sont identiques entre elles. Pour rappel:
selecteur1, selecteur2 {
...règles...
}