Savoir comment utiliser les sélecteurs CSS

Cours savoir comment utiliser les sélecteurs CSS, tutoriel & guide de travaux pratiques en pdf.

Syntaxe des sélecteurs

Les sélecteurs peuvent être de type simple (cas du sélecteur universel), de type sélecteurs d’attributs ou encore de type sélecteurs d’id.
Les sélecteurs de type simple peuvent être combinés à l’aide de caractères spéciaux comme un espace, un « + » ou un « > ».
Enfin on peut combiner les sélecteurs dans une liste quand on veut appliquer un même style aux éléments ciblés par plusieurs sélecteurs.
h1 { color: red; } h2 { color: red; } h1, h2 { color: red; } /* équivalent aux 2 lignes ci-dessus */
Sélecteur universel
Le sélecteur universel correspond au caractère « * », il représente l’ensemble des éléments de l’arbre HTML et peut être omis.
*.warning .warning /* les 2 syntaxes sont équivalentes */
Sélecteur de type
Un sélecteur de type correspond au nom de l’élément HTML. Il permet d’appliquer un style à tous les éléments de ce type dans le document HTML. La règle suivante concerne tous les éléments h1.
h1 { font-family: sans-serif; }
Sélecteur descendant
Un sélecteur descendant permet de cibler les éléments enfants d’un autre élément.
L’exemple suivant appliquera une couleur jaune au texte de tous les éléments strong contenus dans un paragraphe.
p strong { color: yellow; }