Qu'est-ce qu'un sélecteur CSS ?
Degui Adil/Getty Images
CSS s'appuie sur des règles de correspondance de modèles pour déterminer quel style s'applique à quel élément du document. Ces modèles sont appelés sélecteurs et ils vont des noms de balises (par exemple,
|__+_| pour faire correspondre les balises de paragraphe) à des modèles très compliqués qui correspondent à des parties très spécifiques d'un document. Par exemple, |_+_| correspondrait à n'importe quel |_+_| tag avec une classe de |__+_| c'est un enfant du paragraphe avec l'id |_+_|Un sélecteur CSS est la partie d'un appel de style CSS qui identifie quelle partie de la page Web doit être stylisée. Le sélecteur contient une ou plusieurs propriétés qui définissent comment le HTMLLes sélecteurs CSS
Il existe plusieurs types de sélecteurs :
- sélecteurs de type - correspondant à un élément spécifique
- sélecteurs de classe - éléments correspondants avec une classe spécifique
- Sélecteurs d'ID - faire correspondre l'élément avec un ID spécifique
- sélecteurs descendants – éléments correspondants descendants d'un élément spécifique
- sélecteurs enfants - éléments correspondants qui sont un enfant de l'élément spécifique
- sélecteurs universels - correspondant à n'importe quel élément
- sélecteurs frères adjacents - éléments correspondants immédiatement précédés d'un élément spécifique
- sélecteurs d'attributs - éléments correspondants avec un attribut ou une valeur d'attribut spécifique
- sélecteurs de pseudo-classe - éléments correspondants avec une pseudo-classe spécifique
- sélecteurs de pseudo-éléments - éléments correspondants avec des propriétés de pseudo-éléments spécifiques
Formater les styles CSS et les sélecteurs CSS
Le format d'un Style CSS ressemble à ça:
|__+_|Séparez plusieurs sélecteurs ayant le même style par des virgules. C'est ce qu'on appelle le groupement de sélecteurs. Par exemple:
|__+_|
Grouper les sélecteurs est un mécanisme abrégé pour garder vos styles CSS compacts. Le regroupement ci-dessus aurait le même effet que :
|__+_|Testez toujours vos sélecteurs CSS
Tous les anciens navigateurs ne prennent pas en charge tous les sélecteurs CSS. Si vous configurez CSS pour une utilisation avec des navigateurs aussi anciens qu'IE8 ou plus anciens, assurez-vous de tester vos sélecteurs dans autant de navigateurs sur autant de systèmes d'exploitation que vous pensez qu'ils pourraient être utilisés pour accéder à votre code. Si vous utilisez CSS1, CSS2 , ou les sélecteurs CSS3 à utiliser avec les navigateurs actuels, ça devrait aller.