div> p + div [id * = 'en-tête'] - Si vous voyiez ce désordre mélangé de sélecteurs dans le CSS de quelqu'un, pourriez-vous le déchiffrer?
Si ce n'est pas le cas, vous aurez envie de lire cet article sur les sélecteurs géniaux CSS que vous devriez connaître!
Une éducation défaillante
Comme beaucoup de CSS autodidactes, mon éducation a été concoctée à partir d'un million de sources différentes. J'ai lu des articles, suivi des tutoriels et expérimenté jusqu'à ce que ma tête me fasse mal pour arriver à un point où je pourrais casser une mise en page complexe et obtenir le style que je veux sans trop de peine.
Cependant, au fil du temps, j'ai lentement commencé à réaliser que je n'avais pas bien compris l'un des éléments les plus fondamentaux et essentiels du travail avec CSS: les sélecteurs. Bien sûr, je savais comment cibler une classe, un ID ou un lien, mais je voyais souvent des extraits de code avec des sélecteurs qui me paraissaient totalement étrangers.
Après avoir écrit ces pratiques de codage déroutantes pendant si longtemps, j'ai décidé de vraiment m'asseoir et d'en apprendre davantage sur les sélecteurs CSS. Non seulement cela a changé ma façon de coder, mais cela m'a considérablement aidé à interpréter et à apprendre du CSS que d'autres écrivent.
Je ne suis certainement pas le premier à écrire sur les sélecteurs CSS et cet article n’ajoutera rien de révolutionnaire à la discussion. Mais si vous êtes comme moi, un codeur autodidacte avec une éducation marbrée, il pourrait s'agir de l'article qui clarifie certaines de vos plus grandes confusions lorsque vous contemplez avec émerveillement le code crypté des autres.
Rencontrer la famille
Avant de vous familiariser avec les sélecteurs CSS complexes. Vous devez comprendre quelques points concernant la hiérarchie HTML. Vous avez déjà entendu parler de ces termes auparavant, mais il est temps de vraiment y penser et de bien comprendre leur fonctionnement.
Nous expliquons et faisons référence à la structure d'un document HTML en utilisant la métaphore d'un arbre généalogique. Il y a des parents, des enfants, des frères et soeurs, des descendants et des ancêtres. Pour voir ce que chacun signifie, utilisons le code simple ci-dessous.
Notre div contient deux éléments de paragraphe et une ancre. Tout de ceux-ci sont les descendants de la div, qui occupe la position de base dans ce cas. Un enfant est un descendant direct d'un parent. Ainsi, dans l'exemple ci-dessus, les deux paragraphes sont des enfants de la div, mais pas l'ancre. Au lieu de cela, il s'agit d'un enfant du deuxième paragraphe.
De même, si nous remontons dans l’arbre, la div a une relation différente avec les éléments. Le div est le parent des balises de paragraphe, mais un ancêtre de la balise d'ancrage.
La relation finale est celle des frères et sœurs, également appelés frères et sœurs adjacents. Comme dans votre famille, les frères et soeurs partagent un parent. Ainsi, dans l'exemple ci-dessus, les deux paragraphes sont des frères et soeurs, car le parent des deux éléments est le div. L'ancre n'a pas de frères et soeurs, car il s'agit du seul enfant du paragraphe.
Obtenu que?
La métaphore de la famille peut devenir vraiment déroutante, mais seulement si vous y réfléchissez trop. La terminologie est assez intuitive et si vous réfléchissez au sens littéral du mot, vous pouvez deviner ce que cela signifie en termes HTML.
Juste au cas où vous auriez encore besoin d'un peu plus de précisions, réécrivons l'exemple ci-dessus avec un contenu expliquant la hiérarchie de chaque élément.
Le sélecteur d'enfants
Maintenant que nous avons compris le fonctionnement du HTML, nous pouvons commencer notre discussion sur les sélecteurs CSS, qui exploitent ce système. Forts de notre connaissance de ce qu'est réellement un enfant HTML, nous pouvons examiner le sélecteur d'enfants CSS.
Le sélecteur d'enfants est représenté par le symbole supérieur à:?> Var13 -> ?. Vous avez déjà vu cela auparavant dans CSS, mais vous ne pouvez pas vraiment comprendre comment cela fonctionne.
Cette déclaration prend les balises de paragraphe qui sont des enfants de la div et les rend bleu. Notez que cela ne fonctionne que pour le les enfants de cette div, pas nécessairement tous les descendants. Explorons cela davantage avec l'exemple suivant.
Disons que, pour une raison horrible, nous voulions changer la couleur de ce lien en jaune. De toute évidence, nous pourrions cibler le lien de différentes façons, mais nous essayons d’en savoir plus sur le sélecteur d’enfants, alors partez avec moi. Voyons ce qui se passe si nous implémentons ce CSS:
Oups, ça n'a rien changé! C'est parce que le lien n'est pas un enfant de la div, c'est un enfant du paragraphe. Donc, si nous modifions ce code pour cibler les ancres enfants de paragraphes, nous atteignons notre objectif.
Ordre
Maintenant que vous avez compris le fonctionnement du sélecteur d’enfants, gardez à l’esprit que, comme pour tout CSS, l’ordre fait une grande différence. Pour illustrer cela, commençons par cette structure HTML de base:
Considérons maintenant les deux extraits de code CSS suivants. Ils se ressemblent, mais sont très différents!
Le premier extrait fait apparaître tous les paragraphes en rouge, puis ne change que les enfants de la racine racine en bleu.
Le deuxième extrait fait le contraire, il cible initialement les paragraphes enfants de la première div et les transforme en bleu, puis change tout des paragraphes en rouge. Cela aboutit bien sûr à trois paragraphes rouges.
Le deuxième exemple enfreint une règle importante en CSS: passer du général au particulier et non l'inverse.Puisque nous avons commencé avec une configuration de sélecteur spécifique qui ne ciblait que deux paragraphes, puis un sélecteur général qui visait tous les paragraphes, le second a complètement annulé le premier!
Chaînage
Si vous voulez vraiment devenir fou, vous pouvez chaîner des sélecteurs d'enfants. Dans l'exemple suivant, j'ai d'abord ciblé tous les paragraphes enfants de l'exemple3 div et les ai modifiés en bleu, puis tous les paragraphes d'enfants de div divisés. également les enfants d'un autre div et changé ceux en rouge.
Le sélecteur de fratrie adjacent
Avec les sélecteurs d’enfants à égalité, nous devons apprendre à cibler les frères et sœurs. Le sélecteur de fratrie adjacent est représenté par le symbole plus:? + ?. Avec lui, nous pouvons cibler n'importe quel élément qui est un frère d'un autre élément. Voici un exemple:
Dans notre CSS, nous avons utilisé le sélecteur de fratrie adjacent, qui a changé le deuxième et le troisième paragraphe en rouge. C'est très délicat, n'est-ce pas? instinctivement, nous nous attendons à ce que le premier paragraphe soit également rouge. Après tout, le premier paragraphe est au même niveau de l’arbre que les deux suivants et a des frères et soeurs. Cependant, ce sélecteur ne s'applique qu'aux éléments précédés de quelque chose d'autre. Dans ce cas, seuls les paragraphes précédés directement d'un paragraphe frère seront ciblés. Le premier paragraphe de la liste est précédé du div, il n'est donc pas modifié.
En gardant cela à l'esprit, le code suivant changerait le fond de la div imbriquée en gris car il est en effet précédé par un paragraphe.
Enchaînement
Comme avec les sélecteurs enfants, vous pouvez chaîner des sélecteurs frères adjacents. Le système fonctionne exactement comme avant. Vous pouvez également combiner les deux pour une couche supplémentaire de complication. Voici où notre CSS commence vraiment à paraître étrange.
Dans cet exemple, nous avons ciblé les paragraphes qui étaient des enfants de divs et qui étaient également précédés directement par un autre paragraphe.
L'astérisque tout-puissant
Le dernier morceau de CSS déroutant sur lequel je souhaite revenir est le pire à ce jour: l’astérisque. Saviez-vous que, selon le contexte, l'astérisque peut désigner deux choses complètement différentes?
Sélecteur Universel
Le premier exemple d'astérisque en CSS est celui avec lequel vous êtes probablement le plus familier: le sélecteur universel. Fidèle à son nom, ce sélecteur cible n’importe quel élément de la page. Nous le voyons généralement utilisé dans les réinitialisations CSS. Ce qui suit réinitialise le remplissage et la marge sur chaque élément.
Vous pouvez aller plus loin et obtenir des résultats vraiment intéressants. Par exemple, les tours suivants chaque élément dans un div rouge, cela inclut des éléments tels que les liens qui ont une couleur par défaut définie sur autre chose et qui ne seraient pas affectés par le simple ciblage de la div.
En outre, cet extrait cible les paragraphes de petits-enfants de la div, mais pas les paragraphes enfants directs.
Vous pouvez aller aussi loin que vous le souhaitez, les cibles suivantes ciblent les arrière-petits-enfants de la div. Vous pouvez voir cette méthode de chaînage utilisée fréquemment dans les astuces de débogage CSS.
Sélecteur de valeur d'attribut de sous-chaîne arbitraire
Désormais, avec CSS3, l'astérisque peut également être utilisé pour implémenter le sélecteur de valeur d'attribut de sous-chaîne arbitraire. Vous pouvez extraire ce titre lorsque vous parlez à d'autres développeurs si vous essayez d'avoir l'air intelligent.
Le code suivant cible toute div avec le mot? Section? dans le titre. Cela peut être? Section3? ou? section-Four?, peu importe, tant que le style contient la chaîne indiquée, les styles suivants s'appliquent.
Ce code s'appliquerait à tous les divs dans ce HTML:
Sélecteurs d'attributs
La dernière boule courbe que je t'ai lancée était un exemple de sélecteur d'attribut. En CSS3, les sélecteurs d'attributs sont si compliqués qu'ils méritent leur propre article! Heureusement pour vous, nous avons un article sur ce sujet même.
Sélecteurs d'attributs CSS: comment et pourquoi les utiliser
Si vous êtes un nerd comme moi, il s'agit d'un sujet vraiment fascinant. C'est incroyable de voir tous les outils de sélection que vous avez à votre disposition.
Sélecteurs de pseudo-classes
C’est encore un autre sujet de sélection que vous devriez connaître, et une fois encore, il mérite vraiment une inspection approfondie du sujet. Comme avec à peu près tous les sujets CSS connus de l'homme, CSS-Tricks a ce qu'il vous faut.
Rencontrez les sélecteurs de classe de pseudo
Conclusion
Avec CSS, il y a presque toujours plus d'une façon de cibler quelque chose. En fait, il y a souvent une demi-douzaine de façons. Pour l’un des exemples ci-dessus, vous pouvez probablement nommer un moyen plus rapide de cibler les objectifs que nous visions, mais à mesure que vous vous familiarisez avec le DOM, ces sélecteurs commencent vraiment à être utiles.
Même si vous n’avez jamais besoin d’eux, il est primordial de les comprendre car vous volonté voir les projets sur lesquels vous collaborez, les frameworks que vous téléchargez, les tutoriels que vous lisez et tout autre endroit où vous trouvez régulièrement du code. Comprendre les relations entre les éléments HTML et les sélecteurs CSS correspondants ne peut que faire de vous un meilleur codeur!