Dans les CSS, les sélecteurs sont utilisés afin de cibler les éléments HTML d'une page web à mettre en forme. Il y a une grande variété de sélecteurs disponibles dans les CSS, permettant une grande précision dans le choix d'un élément à composer. Dans les quelques articles suivants, nous allons parcourir les divers types dans le détail en montrant comment ils fonctionnent.

Prérequis : Notions de base sur les ordinateurs, installation des logiciels de base, connaissances élémentaires sur la  gestion des fichiers et des notions de HTML (étude de Introduction au HTML) et une idée sur le fonctionnement des CSS.
Objectif : Apprendre en détail comment les sélecteurs des CSS fonctionnent.

Bases

Dans l'article précédent, nous avons expliqué en détail la syntaxe et la terminologie générale des CSS. Pour résumer, les sélecteurs sont une partie d'une règle CSS et viennent juste avant les blocs de déclaration CSS.

Divers types de sélecteurs

Les sélecteurs peuvent être répartis dans les catégories suivantes :

  • Sélecteurs simples : ils correspondent à un ou plusieurs éléments appartenant à un type d'élément, une class ou un id.
  • Sélecteurs d'attributs : ils correspondent à un ou plusieurs éléments selon une ou plusieurs valeurs d'attribut.
  • Pseudo-classes : ils correspondent à un ou plusieurs éléments se trouvant dans un certain état, comme un élément survolé par le pointeur de souris ou une case à cocher qui est actuellement désactivée ou cochée, ou bien encore un élément premier enfant d'un parent dans l'arbre DOM.
  • Pseudo-éléments : ils correspondent à une ou plusieurs parties d'un contenu se trouvant dans une certaine position par rapport à un élément, par exemple le premier mot de chaque paragraphe ou bien un contenu créé apparaissant juste avant un élément.
  • Combinaisons : ce ne sont pas exactement des sélecteurs, mais des manières de combiner deux ou plusieurs sélecteurs de manière utile pour des sélections tout à fait particulières. Ainsi, par exemple, vous pourrez sélectionner uniquement les paragraphes descendants directs de div ou de paragraphes suivant exactement les en‑têtes.
  • Sélecteurs multiples : à nouveau, il ne s'agit pas de sélecteurs autonomes ; l'idée est que vous pouvez placer plusieurs sélecteurs sour un même règle CSS, séparés par des virgules, pour appliquer un unique jeu de déclarations à tous les éléments désignés par par ces sélecteurs.

Panorama des articles sur les sélecteurs

 

Les quatre articles suivants explorent tous divers aspects des sélecteurs — nous avons éclaté ces informations vu leur volume, en espérant les rendre moins impressionnantes. Nous ferons ainsi des étapes claires avec des pauses dans le parcours d'apprentissage. Les articles sont les suivants :

Il est fortement conseillé de s'attaquer d'abord aux sélecteurs simples, pour s'assurer de ne pas manquer des informations essentielles.

Dans ce module

Étiquettes et contributeurs liés au document

Contributeurs à cette page : Dralyab, mangasource, SphinxKnight, Banban, PetiPandaRou
Dernière mise à jour par : Dralyab,