Comment utiliser les sélecteurs jQuery et CSS, et les bases de leur fonctionnement

L'autre jour, j'interviewais quelqu'un qui avait terminé la certification frontale de freeCodeCamp. Il était également diplômé d'un bootcamp plutôt prestigieux, où les participants codaient de 8h à 20h pendant six semaines consécutives. Yikes!

Sa capacité de programmation était excellente, mais j'ai été surpris de voir que ses connaissances en CSS faisaient défaut. Et par manque, je veux dire qu'il ne savait pas comment sélectionner une classe pour appliquer un style. Cela ne reflète pas nécessairement négativement sur lui. Si quoi que ce soit, cela montre comment de nombreux programmeurs voient le CSS.

Beaucoup de gens pensent qu'apprendre le CSS n'est pas important, car les concepteurs seront généralement en mesure d'implémenter le CSS pour vous. Bien que cela soit vrai, il y a plusieurs fois que vous (en tant que programmeur) aurez besoin de connaître quelques CSS de base afin de sélectionner un élément et lui dire de faire quelque chose quand autre chose se produit.

Par exemple, la plate-forme d'animation Green Sock (GSAP) est probablement trop programme pour être centrée sur le concepteur. Cela nécessite un développeur ayant une connaissance du CSS ainsi que de la programmation.

Je ne dis pas que chaque développeur doit être un maître CSS. Mais je pense que si vous vous qualifiez de développeur full-stack, vous devez connaître les bases du CSS. Et les bases commencent avec le sélecteur .

Avertissement: les sélecteurs jQuery ne sont pas réellement uniques à jQuery - ils sont en fait des sélecteurs CSS. Cependant, si vous êtes comme moi, vous avez appris jQuery avant de bien apprendre le CSS, et donc automatiquement associé les sélecteurs à jQuery. Bien que cet article concerne les sélecteurs CSS, il vous aidera également si vous avez besoin de précisions sur les sélecteurs jQuery.

Le sélecteur CSS

Je trouve toujours utile de jouer avec du code, alors voici un simple CodePen pour jouer avec les sélecteurs de base.

En HTML, il existe trois façons d'étiqueter ou de catégoriser des éléments. La première méthode est la plus large: par nom de balise. Par exemple, vous pouvez sélectionner tous lesdiv s sur votre page en utilisant le sélecteur simple div. Hé, c'était facile!

La deuxième méthode est probablement celle que vous utiliserez le plus: l' classattribut. Vous pouvez sélectionner par classe en utilisant un point ( .), donc dans l'exemple ci-dessus, pour sélectionner le toutéléments avec la classe sectionque j'utilise .sectioncomme sélecteur.

La troisième méthode est souvent surutilisée, mais toujours utile, et c'est l' idattribut. Les identifiants doivent identifier vos éléments, tout comme votre SSN (aux États-Unis) peut vous identifier en tant que personne. Cela signifie que les identifiants doivent être uniques sur toute la page. Pour sélectionner un élément avec un identifiant spécifique, vous utilisez le hashtag ( #) ou octothorpe comme j'aime l'appeler. Pour sélectionner l'élément avec l'ID otherque j'utilise #other.

Ce sont les sélecteurs les plus élémentaires. Récapituler:

  • sélectionner par nom de balise (pas de préfixe)
  • sélectionner par nom de classe (préfixe de .)
  • sélectionner par ID (préfixe de #)

Ces trois sélecteurs à eux seuls vous permettront de sélectionner presque tout sur votre page Web.

Quiz 1

  1. Comment sélectionneriez-vous toutes les balises de paragraphe sur la page? (indice: les balises de paragraphe sont p)
  2. Comment choisiriez-vous tous les éléments avec la classe de button-text?
  3. Comment choisiriez-vous l'élément avec l'ID de form-userinput?

N'hésitez pas à partager vos réponses dans les commentaires!

Tous les identifiants doivent-ils être uniques?

C'est une petite digression qui me semble très importante. Mais si vous n'êtes ici que pour apprendre à utiliser les sélecteurs, n'hésitez pas à passer à la section suivante

Avec un nom comme ID, vous supposeriez que chaque ID HTML doit être unique ou votre document HTML ne fonctionnera pas. Après tout, essayer d'avoir deux constvariables fera crier de nombreux éditeurs, alors HTML ne crierait-il pas aussi?

Le problème est que HTML ne vous criera pas dessus. En fait, personne ne vous dira même que quelque chose ne va pas. Vous pouvez trouver un bogue qui provient d'un identifiant non unique. Mais vous deviendrez fou en essayant de comprendre la cause profonde du bogue, car il s'agit d'un échec très subtil.

L'exemple ci-dessus montre pourquoi le fait d'avoir des ID en double peut causer un problème sur votre page Web. Premièrement, il y a en fait deux divs avec l'ID other. Si vous commentez les styles pour #other, vous verrez que les deux éléments sont réellement stylisés. Cela pourrait vous faire penser: "Eh bien, je peux utiliser les identifiants et les noms de classe de manière interchangeable!"

Pas si vite. Si vous regardez dans le panneau JavaScript, vous verrez que j'ai sélectionné des éléments particuliers en fonction de leur étiquette d'élément: nom de balise, nom de classe ou ID. Vous le remarquerez document.getElementsByTagNameet document.getElementsByClassNameretournerez une collection de tous les éléments HTML correspondants. document.getElementByIdrenvoie uniquement le premier élément HTML qu'il peut trouver avec l'ID correspondant. Vous pouvez le vérifier en décommentant la getVanillaSelectorsfonction et en vérifiant la console.

Pour compliquer davantage les choses, si vous utilisez la querySelectorAllméthode JavaScript (qui prend un sélecteur CSS comme entrée), vous obtenez un résultat totalement différent.

Et juste pour vous embêter, jQuery fait quelque chose de différent malgré une syntaxe similaire à celle de querySelectorAll.

Je n'ai aucune explication pour le comportement différent. Cependant, je peux vous dire comment l'éviter. Voici mes règles:

  1. N'utilisez jamais d'identifiants. Utilisez classplutôt des attributs.
  2. Si j'ai besoin d'utiliser un identifiant, placez-le en espace pour qu'il soit unique même si un élément similaire existe sur la page; par exemplemenu-item-01

Parfois, les formulaires et leurs champs de saisie doivent avoir des identifiants. Dans ce cas, vous pouvez suivre la règle numéro 2. Voici comment j'espacerais un formulaire pour l'inscription de l'utilisateur:

De cette façon, si j'ai deux formulaires sur la même page (disons user-signupet user-signin), ils sont garantis d'avoir des identifiants uniques. Même si les champs userID sont similaires entre les formulaires.

Combinaison de sélecteurs

Parfois, un seul sélecteur ne le coupe pas. Parfois, vous devez obtenir tous ceux divqui ont un nom de classe section. D'autres fois, vous avez besoin de chaque élément avec un nom de classe sectionqui est un élément enfant d'un divavec ID user-signup. Il existe de nombreuses autres combinaisons de sélecteurs possibles.

Dans cette section, vous apprendrez trois façons de combiner des sélecteurs, et je suis convaincu que ceux-ci répondront à 90% de vos besoins. Si vous trouvez que plus de 11% de vos besoins ne sont pas satisfaits, venez me plaindre et je modifierai cela pour dire 89% de vos besoins :).

Comme auparavant, commençons avec un CodePen:

Combinaison de sélecteurs pour un seul élément

OK, couvrons d'abord la combinaison de sélecteurs pour un seul élément. Cela signifie sélectionner l'élément dont le nom de balise est x, ET le nom de classe y, ET l'ID de z. Bien sûr, vous n'avez pas besoin des trois, mais vous pouvez combiner les trois.

Disons que nous voulons sélectionner tous les divs avec la classe de item. Pour ce faire, nous combinons les deux: div.item. Cela va du plus général au plus spécifique de gauche à droite. Cela sélectionne toutes les divbalises dont le nom de classe est ÉGALEMENT item. Il est important de noter qu'il n'y a pas d' espace entre divet .item. L'ajout d'un espace change complètement le sélecteur , comme je le reviendrai dans la section suivante.

Si vous décommentez le CSS correspondant, vous verrez que le sectionavec le nom de classe de itemn'est pas devenu rouge. C'est parce que ce n'est pas une divétiquette.

Vous pouvez faire ce même modèle avec les noms de classe et les ID. Mais si vous avez l'ID d'un élément, vous pouvez aussi simplement utiliser l'ID. Il n'y a aucune raison de sélectionner un ID avec un nom de classe spécifique, car si vous avez suivi les règles d'ID ci-dessus, vous n'avez de toute façon qu'un seul élément avec cet ID.

Mais, juste pour la parité, voici un exemple de choisir la divavec classe itemet ID other: div.item#other. Encore une fois, en allant de gauche à droite, cela va du plus général au plus spécifique.

Vous utiliserez très probablement cette syntaxe pour sélectionner un élément qui a plusieurs classes. Pour ce faire, séparez simplement toutes les classes par des périodes. Pour sélectionner tous les éléments qui ont les DEUX classes itemet section, vous utiliseriez .item.section. L'ordre n'a pas d'importance lorsque vous le faites de cette façon, cela .section.itemfonctionnera également.

Cette astuce vous permettra d'être plus précis dans vos sélecteurs.

Le sélecteur «enfant»

La deuxième façon de combiner des sélecteurs est d'utiliser le sélecteur «enfant», comme j'aime l'appeler. Il y a deux façons de procéder, je vais donc commencer par la plus générale.

Tout d'abord, vous pouvez sélectionner n'importe quel enfant d'un certain élément en ajoutant un espace. Par exemple, pour sélectionner tous les enfants itemde l' #otherélément, ce serait #other .item. Notez l'espace entre les sélecteurs.

Deuxièmement, vous pouvez sélectionner les enfants immédiats d'un certain élément en utilisant le &gt ;. Un «enfant immédiat» d'un élément est celui qui n'a qu'un niveau de profondeur. Dans l'exemple, il y a des wo .iéléments t tem contenus dans cet he #otélément, mais l'un des he .iéléments t tem est enveloppé dans a .wrapchaque élément, de sorte que l'on n'est pas un enfant immédiat.

Pour vous donner un visuel, si vous réduisez tout ce qui se trouve sous l' #otherélément, vous verrez ceci:

Ces deux sont les seuls enfants directs de l' #otherélément. Pour sélectionner uniquement l'enfant direct .itemde #other, vous utiliseriez #other > .item, qui choisirait l'enfant direct, b ut pas celui undernea th .wrappar. Nifty, hein?

Quiz 2

  1. Comment sélectionneriez-vous toutes les balises de paragraphe appartenant à des sectionéléments? (indice: les balises de paragraphe sont p)
  2. Comment sélectionneriez-vous tous les éléments avec la classe de button-text, qui sont les descendants des éléments avec la classe de button?
  3. Comment choisiriez-vous l'élément dont la classe form-inputest un enfant direct d' forméléments?
  4. Question bonus : expliquez ce que ce sélecteur sélectionne: header.title > form.user-signup button.button-danger

Comme avant, n'hésitez pas à partager vos réponses dans les commentaires!

Mettre tout cela ensemble - littéralement

Vous pouvez combiner des sélecteurs combinés. Vraiment. La question bonus ci-dessus en montre un exemple, mais j'ai ajouté quelques combinaisons à la fin de l'exemple codepen.

Par exemple, vous pouvez choisir tous les .items qui sont des enfants de divs avec la classe de parent-itemen utilisant div.parent-item .item. Whoa!

Vous pouvez également choisir des descendants directs. Par exemple, pour sélectionner tous les divs avec la classe de itemqui sont des descendants directs de divs avec la classe de parent-item: div.parent-item > div.item.

Et enfin, juste pour jouer avec vous, vous pouvez marcher dans l'ensemble de l' arborescence DOM: div.parent-item .coolest-item .item. itemclasse qui est enfant à coolest-itemclasse qui est enfant à divavec classe de parent-item.

Notez que ce n'est généralement pas une bonne idée d'aller au-delà de deux ou trois niveaux de profondeur lors de l'imbrication des sélecteurs. Ensuite, vous entrez dans d'étranges domaines de spécificité que vous pouvez résoudre plus efficacement en nommant mieux vos classes CSS. Mais cela sort du cadre de cet article. Si vous voulez en savoir plus, faites-le moi savoir et j'écrirai à ce sujet.

Bonus: utiliser Chrome DevTools pour obtenir un sélecteur

Vous pouvez utiliser Chrome DevTools pour obtenir le sélecteur de tout élément que vous pouvez sélectionner sur le DOM. Voici comment:

  1. Ouvrez Chrome DevTools. Puisque vous sélectionnez un élément, allez-y et faites un clic droit sur l'élément que vous souhaitez sélectionner et cliquez sur «Inspecter»:

2. Faites un clic droit sur l'élément DOM que vous souhaitez sélectionner et passez la souris sur "Copier", puis cliquez sur "Copier le sélecteur"

3. Voilà! Le sélecteur que j'ai copié, d'ailleurs, est #editor_93 > section > div.section-content > div:nth-child(3) > p.graf.graf — p.graf-after — figure.graf — trailing.is-selected. Vous pouvez copier le se lector into document.querySelector ou jQuery et obtenir l'élément.

Espérons que cet article a été utile! Si vous avez aimé, donnez-moi quelques applaudissements pour que plus de gens le voient. Merci!