Apprendre à utiliser les Sélecteurs en CSS
#1
Prérequis
Il faut connaître les bases de la sélection CSS. Si ce n'est pas votre cas je vous renvoie au tutoriel Débuter en CSS dans lequel vous trouverez des éléments de base concernant la syntaxe des règles CSS et le principe des sélecteurs.
#2
Les règles de nommage des identificateurs et des classes
On appelle identifiant le nom d'un identificateur ou le nom d'une classe. Lorsqu'un programmeur crée un identifiant il doit respecter des règles. En CSS les identifiants ne peuvent contenir que des lettres (minuscules ou majuscules) ou des chiffres [a-zA-Z0-9] avec en plus le trait d'union et le tiret bas (underscore).
Il y a des contraintes spécifiques pour la première lettre voire les deux selon les cas. Les identifiants ne peuvent pas commencer par un chiffre, deux underscore ou un underscore suivi d'un chiffre ou un trait d'union suivi d'un chiffre.
Le plus simple est de systématiquement commencer par une lettre et vous n'aurez pas de problème.
Souvenez vous également que le CSS est sensible à la case pour les noms des identifiants. La classe para ne sera pas identique à la classe PARA. C'est pareil pour un identificateur.
Par contre le CSS n'est pas case sensitive pour les noms des balises HTML, les noms et les valeurs des propriétés CSS.
#3
Sélecteur universel. * {...}
Le sélecteur universel est utilisé pour sélectionner tous les éléments du document. Il est souvent utilisé pour faire ce que l'on appelle un reset CSS. C'est la règle CSS que vous pouvez voir dans l'exemple ci-dessous. Cette règle figure souvent au début de la feuille de style. Tous les éléments sont sélectionnés de manière à mettre à zéro les margin et les padding qui proviennent de la feuille de style par défaut d'un navigateur.
Il faut savoir que le reset CSS est controversé car justement il sélectionne tous les éléments sans aucune distinction. Je vous le montre donc ici à titre d'exemple sans forcément vous le conseiller.
Tester le code
#4
Sélection d'un identificateur. #mon-id {...}
Dans l'exemple ci-dessous je sélectionne le paragraphe qui est repéré par l'identificateur para et pour cela je mets un dièse (# hashtag) devant para au niveau du sélecteur qui est donc #para. Je ne sélectionne que ce paragraphe et strictement rien d'autre.
J'en profite pour vous rappelez qu'un identificateur doit être unique dans un document car sinon il y a une ambiguïté au niveau de l'identification d'un et d'un seul élément 😇.
Tester le code
#5
Sélection d'une classe. .ma-classe {...}
Ci-dessous je sélectionne deux éléments HTML différents au moyen d'une classe. Ici la classe para. Pour cela au niveau du sélecteur CSS j'écris le nom de la classe soit para et je mets un point devant soit .para. Comprenez bien qu'il n'est pas obligatoire que les éléments HTML soient différents. C'est possible et c'est ce que j'ai voulu montrer dans l'exemple ci-dessous mais ce n'est pas obligatoire.
#6
Sélection d'éléments HTML. h2 {...}
Dans l'exemple ci-dessous je sélectionne tous les éléments h2. Curieusement à mon goût ce sélecteur est appelé le sélecteur de type. C'est sans doute parce qu'il sélectionne tous les éléments de "type" h2. Mais le "type" d'un élément HTML ça peut être une façon de parler mais ça ne veut rien dire de précis. Bon, c'est l'idée.
Il est possible de coupler le sélecteur de type avec le nom d'un identifiant p#para ou d'une classe p.para. Personnellement je trouve que cette façon d'écrire améliore la lisibilité de la feuille de style. Toutefois attention car ça change la spécificité du sélecteur. Si vous ne savez pas ce qu'est la spécificité d'un sélecteur je vous conseille le tuto sur la cascade CSS.
#7
Sélecteur multiple. h2 , #para {...}
Il s'agit en fait d'utiliser plusieurs sélecteurs qui vont appliquer le même bloc de déclarations. Pour cela il faut séparer chaque sélecteur par une virgule. Dans l'exemple ci-dessous je cible d'abord tous les éléments h2 puis le paragraphe d'identificateur para. Je dis tous les éléments h2 car si il y avait plusieurs éléments h2 le sélecteur les sélectionnerait tous. Dans mon exemple il n'y a qu'un seul élément h2 et dans ce cas en les prenant tous je ne vais prendre que celui là.
#8
Sélection avec un attribut HTML. img[title] {...}
Dans l'exemple suivant j'ai positionné des images avec différentes valeurs pour l'attribut title. J'ai pris title et pas alt pour avoir une info bulle au survol d'une image par le curseur de la souris. De cette manière on comprend facilement en survolant l'image pourquoi elle a été sélectionnée ou pas.
On va tester tous les cas de figures pour la recherche du mot Paris dans cet attribut title. Ci-dessous vous avez le code HTML de base dans lequel je vais modifier la règle CSS de manière justement à tester tous ces cas de figures.
Dans le code HTML de base ci-dessus j'édite la règle CSS de manière à avoir la règle CSS ci-dessous. Avec le sélecteur ci-dessous je vais sélectionner tous les éléments dans lesquels l'attribut title existe. Comprenez bien c'est un test sur sa présence et pas un test sur sa valeur. Si vous regardez le code HTML de base il n'y a que dans la dernière image paris-sacre-coeur.jpg que l'attribut title n'est pas présent. Donc la dernière image sera la seule image à ne pas avoir de cadre marron-rouge.
Dans mon code HTML de base je modifie la règle CSS de manière à avoir la règle CSS ci-dessous. Avec le sélecteur ci-dessous je vais sélectionner tous les éléments dans lesquels l'attribut title a exactement la valeur Paris. Quand je dis exactement ça veut dire qu'il ne doit rien avoir ni devant ni derrière le mot Paris et qu'en plus le P de Paris doit être un P majuscule et les autres lettres des minuscules. Dans ce cas on dit que la comparaison est case sensitive ou sensible à la case. Si vous regardez le code HTML de base vous constatez qu'il n'y a que l'image paris-trocadero.jpg qui répond au sélecteur. Ce sera donc la seule image qui aura un cadre marron-rouge.
Dans mon code HTML de base je modifie la règle CSS de manière à avoir la règle CSS ci-dessous. Avec le sélecteur ci-dessous je vais sélectionner tous les éléments dans lesquels l'attribut title contient au moins une occurrence du mot Paris. Quand je dis contient au moins une occurrence du mot ça veut dire qu'il peut y avoir d'autres mots devant ou derrière le mot Paris. Il s'agit du mot Paris à la majuscule près. Si vous regardez le code HTML de base vous constatez qu'il y a l'image paris-notre-dame.jpg puis paris-seine.jpg puis paris-eiffel.jpg et enfin paris-trocadero.jpg qui sont dans ce cas. Ces images auront donc un cadre marron-rouge.
Dans mon code HTML de base je modifie la règle CSS de manière à avoir la règle CSS ci-dessous. Avec le sélecteur ci-dessous je vais sélectionner tous les éléments dans lesquels l'attribut title commence par le mot Paris. Quand je dis commence ça veut dire qu'il peut y avoir d'autres mots derrière le mot Paris. Il s'agit du mot Paris à la majuscule près. Si vous regardez le code HTML de base vous constatez qu'il y a l'image paris-seine.jpg et paris-trocadero.jpg qui sont dans ce cas. Ces images auront donc un cadre marron-rouge.
Dans mon code HTML de base je modifie la règle CSS de manière à avoir la règle CSS ci-dessous. Avec le sélecteur ci-dessous je vais sélectionner tous les éléments dans lesquels l'attribut title se termine par le mot Paris. Quand je dis se termine ça veut dire qu'il peut y avoir d'autres mots devant le mot Paris. Il s'agit du mot Paris à la majuscule près. Si vous regardez le code HTML de base vous constatez qu'il y a l'image paris-eiffel.jpg et paris-trocadero.jpg qui sont dans ce cas. Ces images auront donc un cadre marron-rouge.
#9
Combinateur de descendants. #dialog-connexion .push_button {...}
Les combinateurs vous aident à vous positionner sur l'arborescence du document en utilisant les relations ancêtre et descendant, parent et enfant, frère. Qu'est ce que ça veut dire ? Un élément HTML peut contenir un autre élément HTML. L'élément qui contient est l'élément parent. L'élément qui est contenu est l'élément enfant. Si il y a plusieurs éléments de contenus dans le même parent alors ils sont frères entre eux. Enfin lorsque les éléments sont contenus les uns dans les autres sur plusieurs niveaux alors on peut parler de descendants et d'ancêtres.
Ci-dessous les deux boutons sont stylés en une seule fois avec la classe .push_button. Ensuite je me sers de la relation grand-parent et enfant. Je cible le bouton de connexion mais je ne le cible pas directement je désigne au préalable son grand-père qui est le div d'identificateur dialog-connexion.
#10
Combinateur d'enfants directs. body > p {...}
Ici c'est la relation parent et enfants qui est utilisée. On parle aussi d'enfants directs d'où le nom du combinateur. Les paragraphes qui sont en fait des petits-enfants du body ne seront pas sélectionnés. C'est le cas du "Paragraphe 3" puisqu'il est enfant direct d'un div et pas du body. Et c'est aussi le cas des "Paragraphe 4 et 5" car ils sont enfants directs de article.
Seuls les "Paragraphe 1 et 2" sont sélectionnés.
Tester le code
#11
Combinateur du frère adjacent. article + p {...}
Comment fonctionne ce combinateur ? Le sélecteur contient deux frères. C'est le deuxième frère qui est sélectionné.
Dans l'exemple ci-dessous les deux frères contenus par le sélecteur sont l'élément article et l'élément p. Le sélecteur va sélectionner le premier élément p soit le frère adjacent de l'élément article. Le terme adjacent ne suffit pas pour décrire ce que le sélecteur fait. En fait il sélectionne un frère adjacent mais qui est après.
Deux remarques :
- Comprenez bien que seul le premier paragraphe va être sélectionné et pas celui qui contient "Second paragraphe" car ce dernier n'est pas adjacent à
article. - Comprenez bien aussi qu'il est le seul à être adjacent ET derrière puisque il y a un paragraphe qui contient "Un paragraphe avant article" qui est adjacent mais devant. Et qui lui ne sera pas sélectionné.
#12
Combinateur des frères adjacents. article ~ p {...}
Le fonctionnement est presque identique au combinateur précédent. Aussi je ne vais pas reprendre ce que j'ai déjà dit. Pour une meilleure compréhension je vous conseille de voir les deux combinateurs et de les comparer.
Avec ce combinateur vous pouvez sélectionner tous les frères adjacents qui sont placés après. Ici les deux paragraphes qui sont après l'élément article vont être sélectionnés (* contrairement à l'exemple précédent).
#13
Pseudo-classes de liens.
Les pseudo-classes sélectionnent un élément lorsque cet élément est dans un état particulier. La liste des pseudo-classes est longue et dans ce tuto je me limite à celles qui à mon avis sont les plus utilisées.
Ici je sélectionne des liens lorqu'ils qui sont dans un état particulier.
Tester le codeJe vais aussi citer la pseudo-classe :focus qui permet de cibler comme son nom l'indique un élément qui a le focus. Je rappelle qu'un élément qui a le focus reçoit les événements clavier et souris. Autre exemple si vous avez plusieurs fenêtres ouvertes sur votre écran et que vous tapez sur une touche du clavier c'est la fenêtre qui a le focus et elle seule qui va recevoir le caractère.
L'ordre selon lequel les pseudo-classes doivent être écrites dans la feuille de style est important. Il y a deux moyens mnémotechniques pour s'en souvenir :
- Le fameux
LoVe HAtequi rappelle cet ordre : Link, Visited, Hover, Active. - Et un autre moins connu, pas très classe 😕 mais plus précis
LoVe Fuck HAtequi rappelle cet ordre : Link, Visited, Focus, Hover, Active.
J'ai déjà parlé de ça dans le tutoriel sur les liens. Consultez le si vous avez besoin d'informations complémentaires.
#14
Pseudo-classes d'input.
Vous pouvez sélectionner l'état des éléments input selon qu'ils sont checked, enabled, disabled.
Ci-dessous :
- Le premier
inputest uncheckbox. Il est coché par l'attributchecked='checked'et lorsqu'il est coché je lui mets unmarginde100px. Donc quand on va le décocher les marges vont revenir à leurs valeurs par défaut et on va pouvoir constater la différence. - Le deuxième
inputest uninputde typetext. Il estenabledce qui veut dire qu'il est prêt à être utilisé pour recevoir des caractères. Je le sélectionne dans cet état avec le sélecteurinput:enabledet je mets la couleur de son contenu à vert. - Le troisième
inputest aussi uninputde typetext. Lui estdisabledce qui veut dire que l'on ne peut pas modifier son contenu. Je le sélectionne dans cet état avec le sélecteurinput:disabledet je mets la couleur de son contenu à rouge.
#15
Pseudo-classes nième enfant.
Vous pouvez sélectionner des éléments en fonction de leur rang dans leur conteneur parent. Vous pouvez sélectionner le nième enfant d'un conteneur en utilisant nth-child(n) où n est le rang de l'élément (en commençant à 1). Vous pouvez sélectionner un premier enfant en utilisant first-child. Vous pouvez sélectionner un dernier enfant en utilisant last-child.
Par exemple ci-dessous :
- Avec le sélecteur
p:first-childla condition pour qu'un élément soit sélectionné c'est que ce soit un paragraphe ET un enfant de rang 1. Peu importe qui est le parent. Dans mon exemple il n'y a que le paragraphe qui contient "Premier paragraphe" qui est premier enfant. Il est enfant d'undivmais comme je l'ai dit peu importe. - Avec le sélecteur
p:nth-child(2)la condition pour qu'un élément soit sélectionné c'est que ce soit un paragraphe ET qu'il soit enfant de rand 2. C'est le cas du paragraphe qui contient "Deuxième paragraphe". - Avec le sélecteur
p:last-childla condition pour qu'un élément soit sélectionné c'est que ce soit un paragraphe ET qu'il soit dernier enfant. C'est le cas du paragraphe qui contient "Cinquième paragraphe".
Dans l'exemple ci-dessous j'ai été obligé de placer un div car dans le code de test je donne des explications qui sont placées derrière le paragraphe qui contient "Cinquième paragraphe" ce qui fait que sans le div ce paragraphe n'est plus en position de last-child.
Vous pouvez sélectionner les rangs pairs(even) et les rangs impairs(odd). Dans le tutoriel sur les tableaux j'ai utilisé odd et even dans plusieurs exemples.
Tester le code
#16
Pseudo-élément ::first-letter
Les pseudo-éléments vont sélectionner des morceaux de contenu. Il faut mettre un double :: devant un pseudo-élément.
Ci-dessous le pseudo-élément ::first-letter sélectionne la première lettre du contenu de l'élément p.
#17
Pseudo-élément ::first-line
Le pseudo-élément ::first-line sélectionne la première ligne. Ici c'est dynamique, on voit bien que si on change la taille de la fenêtre et bien on va changer le contenu de la première ligne. On ne pourrait pas mettre un span car on ne saurait pas où le mettre.
#18
Pseudo-éléments ::before et ::after
A l'aide de la propriété content je peux ajouter du contenu avant ou après un élément. A noter que les contenus insérés seront enfants du contenu initial.
Ci dessous avec les sélecteurs a::before et a::after je désigne un endroit respectivement l'endroit qui se trouve avant les liens et celui qui se trouve après les liens. Avec la propriété content je vais aller ajouter du contenu à l'endroit que j'ai désigné.
Donc ci-dessous je vais ajouter du contenu avant et après les liens puisque j'ai utilisé ::before et aussi ::after.
