Les feuilles de style CSS (2/15) - Les sélecteurs

Bonjour à tous et bienvenue dans cette nouvelle leçon sur le CSS. Aujourd'hui, nous allons voir les sélecteurs. Les sélecteurs permettent de cibler un élément HTML afin de lui appliquer un style. Regardons le code HTML suivant. Dans la balise body, nous disposons de 4 balises p. 2 d'entre elles sont intégrées dans la balise section. Et les deux autres sont intégrées directement au sein de la balise body. Si nous souhaitons appliquer un style CSS à la balise p, alors il suffit d'aller sur la feuille de style que nous avons associée via la balise link et on va mettre p. Ensuite, on déclare le style souhaité, par exemple color red. Maintenant, quand j'exécute la page pour voir le résultat, je vais voir que toutes les balises p ont été colorées en rouge. Rouge. C'est normal parce que dans le CSS j'ai bien spécifié le sélecteur p. Ça veut dire que le navigateur il va chercher dans le document toutes les balises p, il va leur appliquer ce style. Alors dans ce cas p est nommé sélecteur de balises, il va cibler toutes les balises p. De la même manière si je mets par exemple div, alors dans ce cas le navigateur va chercher toutes les balises div de mon document HTML, il va leur appliquer un style. Imaginons maintenant que je veux spécifier certaines balises P de telle sorte à leur appliquer le style et ignorer les autres. Pour faire ceci, il y a plusieurs manières. La plus facile d'ailleurs, c'est d'appliquer ce que l'on appelle un identifiant d'élément ou classe d'élément à la balise P. Par exemple, imaginons que le premier paragraphe, je veux le colorer en rouge, alors que toutes les autres balises, je vais les ignorer. Il suffit de mettre id égale par exemple id1. Alors là, je viens d'ajouter un attribut id avec la valeur id1. On appelle id identifiant d'élément, c'est-à-dire que c'est un élément unique. Alors j'ai pas le droit de déclarer un autre id dans le même document avec la même valeur. C'est pourquoi on l'appelle un identifiant d'élément. Maintenant, pour cibler la balise p qui est identifiée par id1, il suffit d'aller sur le CSS et mettre ici #id1. Le préfixe# indique au navigateur qu'il faut chercher un ID et non pas une balise. Maintenant quand j'exécute, je vais voir que seule la première balise P a été concernée par le style CSS. Imaginons maintenant que les autres balises P, je veux leur appliquer un style différent. Alors dans ce cas, il s'agit d'un groupe d'éléments. On va leur appliquer donc un autre attribut qui s'appelle class. Par exemple ici classe, je vais mettre cl1. Voilà, de la même manière je vais copier cet attribut et je vais l'appliquer à toutes les balises p restantes. Alors le ID c'est unique, ça doit pas se répéter. Par contre la classe je peux la répéter autant de fois que je le souhaite. Ça veut dire que tout simplement à partir du paragraphe 2, tous les paragraphes suivants font partie du même groupe d'éléments et seront par conséquent concernés par le même style CSS. Comment cibler maintenant les balises p avec l'attribut class cl1, il suffit d'aller ici, je vais mettre par exemple .cl1 et je mets ici color par exemple orange. Voilà, alors maintenant quand j'exécute la page, je vais voir que les balises restantes ont été colorées en orange. En fait, pour dire au navigateur que nous voulons cibler une classe et non pas une balise ou bien un identifiant, il suffit de préfixer le sélecteur par le point. Il existe aussi ce que l'on appelle un sélecteur universel. Imaginez dans ce cas que tous les éléments de votre document, vous voulez les doter d'un même style CSS. Il suffit de mettre étoile et ensuite mettre le style souhaité, par exemple font-size 14 points. Tous les éléments de mon document auront la taille 14 points. Je vais voir que le style est correctement appliqué à toutes les balises sans distinction. Supposons maintenant que je veux dire au navigateur que les balises P qui sont incluses dans la balise section doivent avoir un style différent des autres balises P du même document. Alors il suffit d'aller sur le CSS et mettre le code suivant: section p. Et ensuite je vais mettre le style, par exemple color green. Expliquons un petit peu cette syntaxe. Section, c'est tout simplement la balise mère, ça veut dire la balise qui contiendra les balises qui seront concernées par le style CSS. Dans ce cas, la balise ou bien l'élément concerné par le CSS, c'est p. Il faut mettre obligatoirement un espace pour dire que p, c'est un enfant de section. Alors seules les balises p qui sont des enfants de la balise section auront le style souhaité. Exécutons pour voir le résultat. Alors les 2 premières balises ont été colorées en vert alors que les balises restantes, elles ne sont pas concernées par le style. On peut aussi faire ceci. Dans ce cas-ci, vous mettez le chevron, ça veut dire que les balises P qui sont des enfants directs de section. Autrement dit, si dans le HTML j'ai par exemple une balise div comme ça, alors on constate bien qu'il y a 2 balises P dans la section. Une est intégrée directement, mais l'autre est intégrée par l'intermédiaire d'une balise div. Le sélecteur que j'ai spécifié ici, il va cibler l'enfant direct de section, ça veut dire la deuxième balise. Exécutons pour voir le résultat. Donc seule la deuxième balise est concernée par le style. De la même manière, si par exemple on veut appliquer un style aux deux balises P qui suivent la balise section, alors dans ce cas le style CSS ressemblera à ceci. On va mettre là tilde, ça veut dire que seules les balises P qui sont déclarées après la balise section sont concernées par le style. Exécutons. Alors on voit que les 2 balises qui sont à l'extérieur, ou bien qui viennent après la balise section, ce sont elles qui sont concernées par ce style. Mais imaginez maintenant que je veux cibler la balise p qui vient immédiatement après la balise section, c'est-à-dire la 3e balise. Dans le style CSS, je vais mettre ici le symbole+. Le symbole+ signifie tout simplement que seul le premier élément p qui suit une balise section quelconque de mon document, c'est elle qui est concernée par le style. J'exécute, je vais voir que seul le paragraphe 3 est coloré en vert. Il existe des techniques qui permettent de cibler des éléments particuliers dans un document HTML. Par exemple, jetons un coup d'œil sur le code HTML. Imaginons que nous voulons dire au navigateur qu'il va appliquer un style CSS à toutes les balises P qui possèdent un attribut class avec la valeur cl1. Nous avons vu qu'on peut faire ça avec un sélecteur de classe préfixé par un point. Mais on peut le faire autrement. Avec le CSS, il suffit de mettre ici la balise concernée qui est la balise p, ensuite on ouvre des crochets, puis on déclare le nom de l'attribut concerné qui est dans ce cas class avec la valeur souhaitée qui est cl1. Ça veut dire tout simplement que le style qui est là, il sera appliqué à toutes les balises p qui possèdent un attribut qui s'appelle class avec la valeur cl1. Si j'exécute, je vais voir que les 3 dernières balises, ce sont elles qui sont concernées par le style CSS. Il existe d'autres techniques en CSS qui permettent de cibler des éléments d'une manière plus avancée et principalement via ce que l'on appelle les pseudo-classes et les pseudo-éléments. Mais nous aurons l'occasion de voir ces deux principes dans des futures vidéos. Merci pour votre attention et à la vidéo prochaine.