Les sélecteurs de type CSS ciblent des éléments en fonction du nom de leur nœud. Ainsi, lorsqu'un sélecteur de type est utilisé seul, il ciblera tous les éléments de ce type (autrement dit tous les nœuds avec ce nom) contenus dans le document. Exemple:
/* Cibler tous les éléments <a>. */
a {
color: red;
}
Le problème avec cette méthode, c'est que le style sera appliqué à toutes les balises <a>. Il devient ainsi difficile d'appliquer un style différent à un autre lien et il nous faudra utiliser plutôt recourir aux sélecteurs de classe ou par étiquette (ID).
Les sélecteurs de classe CSS permettent de cibler des éléments d'un document en fonction du contenu de l'attribut class de chaque élément.
Syntaxe
.nomdeclasse { déclarations CSS }
Exemples
.monTitre {
background-color: turquoise;
}
.surbrillance {
font-weight: bold;
background-color: yellow;
}
Utilisation
<p class="monTitre">Le titre</p>
<p class="surbrillance">Un texte en surbrillance</p>
Un sélecteur d'identifiant (ID selector) permet, pour un document HTML, de cibler un élément grâce à la valeur de son attribut id. Il faut que la valeur soit exactement la même que celle du sélecteur pour que l'élément soit effectivement ciblé. De plus, le nom de l'identifiant (id) doit être unique , ce qui limite un peu son usage et ne permet pas une aussi grande flexibilité d'utilisation que la classe CSS.
Syntaxe
#identificateur { déclarations CSS }
Exemples
#fond-bleu{
background-color: blue;
}
Utilisation
Un joli petit <span id="fond-bleu">texte sur fond bleu</span>