Définition
Pour commencer, on va voir les sélecteurs.
Les sélecteurs? Et ils sélectionnent quoi?Les balises HTML auxquelles le style doit être appliqué.
Mais... Tu m'as dit que ce n'était pas spécifique au HTML !Effectivement, mais le CSS est tout de même très souvent associé à du HTML, et c'est ce que tu veux faire, donc c'est ce que l'on va faire.
D'accord, donc les sélecteurs.C'est un moyen de "sélectionner" des balises html pour leur appliquer du style. Il y a une syntaxe à comprendre et après c'est très simple.
Les sélecteurs simples
Sélecteur tag
Pour commencer, on peut sélectionner une balise html par son nom de balise, on appelle cela une sélection par tag. Par exemple, pour appliquer du style à une balise p, on va utiliser le sélecteur p, et en CSS on met des accolades après le sélecteur pour définir le style à appliquer.
{"language":"text/css","content":"p{\n\t\n}","filename":""}
Ok, donc juste le nom de la balise, des accolades et on a fait un sélecteur. J'ai tout compris, on peut commencer à faire du style ! Sélecteur id
Pas encore, il existe de nombreux autres sélecteurs ! Tu te rappelles quand on a fait le HTML, on a vu que l'on pouvait lui préciser un attribut id?
Oui je me souviens !Et bien on peut utiliser les id dans les sélecteurs css, il suffit de préciser #[id], par exemple une balise HTML avec l'id "test" pourra être sélectionnée en CSS avec :
{"language":"text/css","content":"#test{\n\t\n}","filename":""}
Un # pour un id, compris !Sélecteur class
Et on avait aussi vu que l'on pouvait préciser des classes à une balise HTML.
Tout à fait !Pour sélectionner une classe, on utiliser .{classe], par exemple pour une balise avec la classe "test" :
{"language":"text/css","content":".test{\n\t\n}","filename":""}
Jusque là, c'est facile !Sélecteur attribut
Effectivement, c'est maintenant que ça se complique un peu. On avait vu de nombreux autres attributs en HTML, et bien pour les utiliser dans un sélecteur CSS il faut faire [attribut], ça récupérera toutes les balises qui possèdent cet attribut. Par exemple pour les balises avec l'attribut href :
{"language":"text/css","content":"[href]{\n\t\n}","filename":""}
C'est toujours simpleEffectivement, mais on peut aussi vouloir récupérer les balises dont un attribut a une valeur particulière, par exemple pour une balise dont l'attribut href vaut "https://www.training-dev.fr" il faudrait faire :
{"language":"text/css","content":"[href=\"https://www.training-dev.fr\"]{\n\t\n}","filename":""}
Très bien !Les Sélecteurs composés
On peut aussi composer plusieurs sélecteurs pour obtenir un sélecteur plus précis.
Ah bon? Je ne vois pas comment...Par exemple pour récupérer tous les éléments <p> dont la class est "test" on peut faire :
{"language":"text/css","content":"p.test{\n\t\n}","filename":""}
Ok, donc si j'ai bien compris, pour une balise <div> qui possède un attribut "title" on ferait : {"language":"text/css","content":"div[title]{\n\t\n}","filename":""}
Oui, sauf qu'il faut bien se souvenir que ça va sélectionner tous les <div> qui possèdent un attribut "title" et pas juste un seul.
Ok compris !On peut aussi combiner plusieurs classes dans un même sélecteur !
Plusieurs classes???Je te rappelle que l'on peut préciser plusieurs classes à un élément HTML en les séparant par un espace.
Oui, mais je ne vois pas où tu veux en venir.Avec un exemple :
{"language":"text/html","content":"<div class=\"card blue-card\"></div>\n<div class=\"card red-card\"></div>","filename":""}
Si on fait un sélecteur
{"language":"text/css","content":".card{\n\t\n}","filename":""}
On va appliquer le style aux deux <div>
Par contre si on fait un sélecteur
{"language":"text/css","content":".card.blue-card{\n\t\n}","filename":""}
Cette fois on ne va appliquer du style qu'à la première <div>
Mais on aurait pas pu faire {"language":"text/css","content":".blue-card{\n\t\n}","filename":""}
Pour n'appliquer du style qu'à la première <div>?
Effectivement, maintenant si je te donne ce HTML et que je te demande de n'appliquer du style qu'à la première <div> :
{"language":"text/html","content":"<div class=\"card blue-card\"></div>\n<div class=\"card red-card\"></div>\n<div class=\"blue-card\"></div>","filename":""}
Je vois... Dans ce cas effectivement il faut utiliser un sélecteur avec les deux classes.Les sélecteurs descendants
Mais on peut aussi naviguer dans les éléments HTML avec les sélecteurs CSS.
Naviguer? C'est à dire?C'est à dire que l'on peut sélectionner des éléments enfants d'autres éléments.
Hum j'ai du mal à te suivre là...Je te donne un exemple de code HTML :
{"language":"text/html","content":"<div class=\"test\">\n\t<p>Texte</p>\n</div>\n<div>\n\t<p>Texte 2</p>\n</div>","filename":""}
Dis-moi comment appliquer du style à la balise <p> qui se trouve dans la <div class="test"> mais pas aux autres <p>
Ah c'est là que tu vas m'apprendre le sélecteur enfantLES sélecteurs enfants ! Il y en a deux différents, le premier est de mettre un espace entre deux sélecteurs :
{"language":"text/css","content":".test p{\n\t\n}","filename":""}
Le deuxième consiste à ajouter un caractère ">" entre le parent et l'enfant :
{"language":"text/css","content":".test > p{\n\t\n}","filename":""}
Pourquoi deux différents pour faire la même chose?Parce qu'ils ne sont pas tout à fait identiques. L'espace permet de désigner n'importe quel enfant, alors que ">" désigne un enfant direct.
Enfant direct?{"language":"text/html","content":"<div class=\"test\">\n\t<div class=\"test-enfant\">\n\t\t<p>texte</p>\n\t</div>\n</div>","filename":""}
La balise <div class="test-enfant"> est un enfant direct de la balise <div class="test">, par contre la balise <p> n'est pas un enfant direct de la balise <div class="test">, mais c'est un enfant direct de la balise <div class="test-enfant">.
Ok je comprends.Donc si on fait :
{"language":"text/css","content":".test p{\n\t\n}","filename":""}
ça va appliquer du style à la balise <p>
Par contre
{"language":"text/css","content":".test > p{\n\t\n}","filename":""}
N'appliquera pas de style, car <p> n'est pas un enfant direct.
Donc autant ne jamais utiliser l'enfant direct dans ce cas.Et si je te demande d'appliquer du style uniquement aux <p> principaux, mais pas aux secondaires dans ce cas :
{"language":"text/html","content":"<div class=\"test\">\n\t<p>Principal</p>\n\t<p>Principal</p>\n\t<div>\n\t\t<p>Secondaire</p>\n\t\t<p>Secondaire</p>\n\t\t<p>Secondaire</p>\n\t</div>\n\t<p>Principal</p>\n</div>","filename":""}
Effectivement, tu m'as encore piégé !Tu t'es piégé tout seul ! Mais je dois t'avouer que j'avais vu la question venir à l'avance.
Je pense qu'on a fait le tour cette fois !Les sélecteurs de fratrie
Pas encore ! Il y a les sélecteurs de fratrie !
Mais tu vas refaire la famille complète? Entre les enfants, les parents et la fratrie, il ne manque plus que les cousins !Ahah, effectivement, on va refaire presque toute la famille. Donc pour les sélecteurs de fratrie, ils permettent de sélectionner un élément du même niveau, donc ni parent, ni enfant, et là aussi il en existe deux différents :
Sélecteur de fratrie global
Le premier permet de sélectionner n'importe quelle balise du même niveau. Il s'agit du sélecteur ~ , par exemple il peut permettre de sélectionner le champ <p> associé au <h2> dans ce HTML :
{"language":"text/html","content":"<div class=\"test\">\n\t<h2>Titre 2 </h2>\n\t<span>texte</span>\n\t<p>paragraphe</p>\n</div>","filename":""}
avec le sélecteur :
{"language":"text/css","content":".test > label ~ p","filename":""}
Attention tout de même, quand je dis de même niveau, les deux balises doivent avoir le même parent, par exemple ce même sélecteur pour ce HTML :
{"language":"text/html","content":"<div class=\"test\">\n\t<h2>Titre 2</h2>\n\t<span>texte</span>\n\t<p>paragprahe</p>\n</div>\n<div class=\"re-test\">\n\t<h2>Titre 2</h2>\n\t<span>texte</span>\n\t<p>paragprahe</p>\n</div>","filename":""}
N'appliquera du style que sur le premier <p> et pas l'autre.
Ok j'ai compris !Sélecteur de fratrie adjacent
Pour l'autre sélecteur de fratrie, il s'agit du + , il permet de sélectionner un élément adjacent, c'est à dire que l'élément doit être juste avant ou juste après. Par exemple dans le HTML précédent, si on avait utilisé :
{"language":"text/css","content":".test > h2 + p","filename":""}
Et bien ça n'aurait pas fonctionné, car il y a une balise <span> entre le <h2> et le <p>
Par contre le sélecteur
{"language":"text/css","content":".test > h2 + span","filename":""}
Aurait bien appliqué du style à l'élément <span> du premier <div>
Je sens que tu vas encore trouver un exemple pour me contredire, mais je ne vois pas dans quel cas on devrait utiliser ce sélecteur et pas l'autre.{"language":"text/html","content":"<div class=\"test\">\n\t<h2>Titre 2</h2>\n\t<p>Premier paragraphe</p>\n\t<p>Deuxième paragraphe</p>\n\t<p>Troisième paragraphe</p>\n</div>","filename":""}
Si on ne veut appliquer du style qu'au premier paragraphe?
J'en était sûr ! Au moins je pense avoir tout compris. Il reste d'autres sélecteurs? Parent peut être?Non, il n'y a pas de sélecteur parent, on ne peut que descendre en CSS.
Ok donc on a fait le tourLes pseudo-classes
Pas encore ! Mais presque, il reste deux choses à voir, tout d'abord les pseudo-classes, elles permettent d'appliquer du style que quand un élément est dans un état particulier.
Tu ne m'as jamais parlé d'état des éléments ! Effectivement, mais tu vas voir c'est assez logique, les pseudo-classes s'écrivent avec :[pseudo-classe], il en existe beaucoup, donc je ne vais pas toutes te les citer, mais prendre trois exemples.
:hover
Le premier est le :hover, qui permet d'appliquer du style à un élément uniquement quand la souris de l'utilisateur est au dessus de cet élément. Par exemple pour appliquer du style à un bouton quand la souris est au dessus, on peut faire :
{"language":"text/css","content":"button:hover{\n\t\n}","filename":""}
Je comprends mieux ce que tu veux dire par "état":checked
On peut aussi appliquer un style particulier à un <input type="checkbox"> ou <input type="radio"> quand la case est cochée, il suffit d'utiliser la pseudo-classe :checked
{"language":"text/css","content":"input[type=\"checkbox\"]:checked{\n\t\n}","filename":""}
:visited
Ou encore un style particulier à un lien, si l'utilisateur a déjà visité la page référencée par le lien avec :visited
{"language":"text/css","content":"a:visited{\n\t\n}","filename":""}
Ok, donc c'est pour appliquer un style à un élément si l'élément répond à une condition particulière.C'est ce que l'on appelle un état, l'élément est dans un état particulier. Et comme je te l'ai dit il en existe de très nombreuses de pseudo-classes, tu pourras voir la liste complète si ça t'intéresse d'en savoir plus.
Ok et tu m'avais parlé d'une dernière chose?Les pseudo-élements
Tout à fait, il s'agit des pseudo-éléments.
Mais... Ce n'est pas ce que l'on viens de voir?Non c'était les pseudo-classes, là on parle des pseudo éléments, qui s'écrivent avec ::[pseudo-élement]
Mais... Mais... C'est exactement pareil ! Tu essaies de m'embrouiller là !Pas du tout, je te remontre les deux syntaxes pour comparer :
{"language":"text/css","content":"element:pseudo-class\nelement::pseudo-element","filename":""}
Ah je vois, il y a une subtilité effectivement, je ne l'avais pas remarqué au premier coup d'oeil.Et cette subtilité est très importante, car contrairement aux pseudo-classes, les pseudo-éléments permettent eux d'appliquer du style à une partie d'un élément.
Une partie c'est à dire?Par exemple avec ce HTML :
{"language":"text/html","content":"<p>\n\tLorem ipsum dolor sit amet, consectetur adipiscing elit.\n\tDonec tristique suscipit molestie.\n\tIn eget tristique mauris.\n\tSuspendisse dolor libero, molestie et felis sit amet, iaculis posuere quam.\n\tLorem ipsum dolor sit amet, consectetur adipiscing elit.\n\tCurabitur scelerisque massa facilisis elit semper ullamcorper.\n\tDonec congue massa mollis neque fermentum, ac lacinia justo efficitur.\n\tMaecenas a rhoncus nisi.\n</p>","filename":""}
Si on ne veux appliquer du style qu'à la première ligne du paragraphe, on pourrait utiliser le pseudo-élement ::first-line
{"language":"text/css","content":"p::first-line{\n\t\n}","filename":""}
before et after
Et il y a aussi deux pseudo-éléments qui sont régulièrement utilisés, il s'agit de ::before et ::after, pour, respectivement, appliquer du style juste avant le début de l'élément, ou juste après la fin de l'élément.
Donc l'élément d'avant et celui d'après, comme avec le sélecteur de fratrie +Pas du tout, on ne parle pas ici d'élément avant ou après, mais bien juste avant l'élément en question ou juste après, là où actuellement il n'y a rien. Et on peut y ajouter du contenu, mais on verra ça plus tard.
Ok je te fait confiance.Il existe d'autres pseudo-éléments, mais de même je te propose d'aller voir la liste
pour les découvrir.
J'ai terminé cette partie