Dans la partie précédente de la série Feuilles de style en cascade (CSS) 101, nous avons expliqué comment gérer plusieurs règles pour un élément. Cet article traite d'une autre fonctionnalité CSS importante : les sélecteurs, qui peuvent être utilisés pour sélectionner des éléments dans une page afin de styliser une page Web.
Type de sélecteur
Les styles CSS disposent de nombreuses façons d’implémenter la sélection d’éléments. Les diverses méthodes de sélection comprennent la sélection via un sélecteur universel, un sélecteur de type, un sélecteur de classe, un sélecteur d'ID, un sélecteur d'ancêtre, un sélecteur de descendant, un sélecteur de frère adjacent et un sélecteur d'attribut.
Ici, nous examinerons chacune de ces méthodes individuellement (à l'exception des frères et sœurs adjacents et des attributs, dont nous discuterons la semaine prochaine). Remarque : La prise en charge des sélecteurs CSS par le navigateur est incohérente, mais vous pouvez utiliser les instructions en ligne pour vérifier si un certain sélecteur fonctionne dans votre navigateur cible.
Universel
Les sélecteurs universels vous permettent d'utiliser des styles sur toute la page. Fondamentalement, un style ne spécifie pas un élément, une classe, etc. spécifique, il s'applique donc à tous les éléments de la page. Ceci est utile pour définir les couleurs, les polices, etc.
Les sélecteurs universels peuvent être utilisés pour tous les éléments de la page, mais ils peuvent être remplacés par des sélecteurs spécifiques. La spécification CSS indique qu'un astérisque (*) peut être utilisé pour représenter un sélecteur universel. Le listing A montre comment utiliser les sélecteurs universels pour définir l'arrière-plan et la police par défaut de la page.
taper
L’une des façons les plus courantes de styliser un élément consiste à utiliser son type. Cela signifie qu'un élément spécifique a son propre style défini, et ce style peut être utilisé pour tous les éléments de ce type, quelle que soit la position de l'élément sur la page. L'exemple du listing B montre l'utilisation d'un sélecteur de type pour styliser tous les éléments de segment de la page.
Avec ce type de sélecteur, tous les éléments de paragraphe de la feuille (sauf s'ils sont remplacés par des sélecteurs plus spécifiques) ont des marges spécifiques et du texte rouge. Vous pouvez désormais également créer vos propres classes CSS pour gérer le style d'éléments spécifiques sur la page.
gentil
Les sélecteurs de classe vous donnent plus de contrôle que les sélecteurs de type lorsqu'il s'agit de décider ce qu'un style couvre. Les styles définis par un sélecteur de classe peuvent être appliqués à tous les éléments dotés d'un attribut de classe, quelle que soit la position de l'élément sur la page. Il offre un excellent contrôle sur les éléments qui reçoivent des styles. L'exemple du listing C montre l'utilisation d'une classe pour formater uniquement le premier paragraphe d'une page. Ainsi, le premier paragraphe a une police irrégulière et les paragraphes suivants sont différents.
Les sélecteurs de classe ne peuvent pas utiliser d'éléments HTML réservés tels que le titre, p, h1, etc. Vous pouvez également utiliser plusieurs classes pour le même élément en les séparant par des espaces. Le listing D montre l'utilisation de plusieurs classes pour styliser un paragraphe spécifique.
Vous pouvez combiner des sélecteurs de classe avec des sélecteurs de type pour styliser certains éléments auxquels des classes ont été attribuées. Dans ce scénario, lors de la définition des styles, le nom de l'élément comporte un nom de classe séparé par des espaces. L'exemple du Listing E montre la technique selon laquelle seuls les éléments de segment qui reçoivent un nom de classe spécifique sont stylisés dans un sens, tandis que les en-têtes qui ont le même nom de classe sont stylisés dans un autre sens. J'entrerai plus en détail lors de l'utilisation de l'attribut ID de l'élément.