Ce qui fait la grande force du CSS, c’est avant tout sa capacité à cibler précisément du contenu HTML pour lui appliquer des styles.
Dans cette partie, nous allons découvrir ensemble de nouveaux sélecteurs CSS dits « sélecteurs avancés ».
Grâce à eux, nous allons par exemple pouvoir sélectionner tous les éléments d’une page HTML, sélectionner un élément par rapport à son parent ou encore sélectionner un élément selon la valeur de son attribut.
Note : il existe de très nombreux sélecteurs avancés en CSS, nous n’allons voir que les plus utilisés ensemble.
Le sélecteur « * » (étoile) permet de sélectionner tous les éléments HTML d’une page d’un coup ; c’est pourquoi il est appelé sélecteur CSS universel.
Grâce à ce sélecteur, on va par exemple pouvoir appliquer une bordure et des marges identiques à tous les éléments HTML de notre page :
Cette partie n’est qu’un rappel, car nous avons déjà souvent groupé des sélecteurs à l’aide du symbole « , » (virgule).
Grouper les sélecteurs nous permet d’appliquer un même style à différents éléments.
Le CSS va également nous permettre de sélectionner un élément relativement à un autre.
Tout d’abord, le sélecteur « A B » (remplacez « A » et « B » par n’importe quel élément) va nous permettre de sélectionner un élément B contenu dans un élément A.
Par exemple, nous allons pouvoir sélectionner tous les paragraphes contenus dans un élément div.
Ensuite, le sélecteur « A + B » va lui nous permettre de sélectionner tous les éléments B de même niveau et suivant immédiatement les éléments A.
Ici, seul notre dernier paragraphe possède une couleur de fond car c’est bien le seul élément p de même niveau qu’un élément div et suivant directement un élément div (les autres paragraphes sont des éléments enfants de nos éléments div).
Finalement, le sélecteur « A > B » va sélectionner tous les éléments B qui sont des éléments enfants directs de A.
Ici, seul notre élément div class="page-container" est un enfant direct de l’élément body, ce sera donc le seul à posséder une bordure. Notez bien qu’ici l’attribut class ne sert à rien, je ne l’ai précisé que pour bien savoir de quel div on parle dans les explications du code.
Le CSS va encore nous permettre de sélectionner un élément HTML selon le fait qu’il possède ou non un attribut et selon la valeur de l’attribut.
Ici encore, nous n’allons voir que les sélecteurs assez courants.
Le sélecteur « A[attribut] » (remplacez "A" par n'importe quel élément HTML et "attribut" par le nom d'un attribut HTML), tout d’abord, va sélectionner tous les éléments A possédant un attribut en particulier.
Le sélecteur CSS « A[attribut="valeur"] » va lui sélectionner tous les éléments A possédant un attribut en particulier avec une valeur précise.
2015-2017 - Tous droits réservés à Pierre Giraud.
Il est strictement interdit de copier et de distribuer le contenu de ce site sans l'accord express de son propriétaire.
En continuant votre navigation sur ce site, vous acceptez l'utilisation des cookies.
N'oubliez pas de me suivre !
