Dans cette vidéo, nous allons parler de quelques autres façons de sélectionner des éléments.
Mis à part les trois principaux que nous avons vu jusqu'à présent.
Et juste pour récapituler ces trois sont les éléments sélecteur de la classe et le sélecteur d'ID afin élément ressemblerait à la classe Ally avec comme point faible et ID est avec le symbole de l'art ou hachage et tout ce que nous mettons à l'intérieur ciblera un ID ou une classe ou tous Éléments d'un type.
Ce sont donc trois façons possibles de sélectionner des éléments, mais il y en a beaucoup plus.
Et nous allons nous concentrer sur cinq ici et ces cinq sont ceux qui, je pense, sont les plus importants les plus courants.
Mais il y en a beaucoup plus.
En fait il ya cet article que j'ai lié à et la description sur Tutt's Plus c'est un article gratuit.
C'est vraiment super.
On appelle les 30 sélecteurs CSSA que vous devez mémoriser et avant de paniquer vous n'avez pas besoin de les mémoriser.
Vous allez naturellement mémoriser les plus importants et ceux que nous utilisons tout le temps.
Mais le point de cet article est de dire qu'il ya au moins 30 bonnes que vous devez savoir.
Sans mentionner si ce sont les 30 seulement que vous avez besoin de mémoriser qui est encore un peu.
Et il ya beaucoup plus que cet article suggère que vous n'avez pas besoin de connaître.
Donc, le point est qu'il ya beaucoup de façons différentes de le faire.
Cet article met en évidence 30 d'entre eux et je vais juste passer par cinq ou six des plus importants.
Donc, je recommande que vous donniez ceci une lecture à travers.
Il va y avoir un exercice dans la prochaine vidéo qui englobe beaucoup de ce qui est couvert dans cet article ainsi que ce que nous couvrons ici et notre éditeur de texte.
J'ai donc un HMO de base.
Je ne vais pas passer par le processus de création du fichier.
Ce n'est pas celui dont vous avez besoin nécessairement de code avec, mais c'est un élément de base lui a ressemble à ceci où nous avons un H1.
Nous avons un lien vers Google.
Nous avons une UL avec trois alliés.
Ensuite, nous avons un H pour et puis un autre vous avec trois alliés et puis un autre quatre et puis un plus vous allez avec trois alliés, mais chaque allié a maintenant un lien et le premier va aussi à Google comme ce lien ici.
Ensuite, l'autre va à Facebook et le dernier va le lire.
Marquage si simple.
Et puis j'ai une feuille de style inclus appelé sélecteurs.
SS Donc, ici, nous allons remplir RC SS. Donc, le tout premier dont nous allons parler est appelé sélecteur D-Star et il est avec un astérisque et il va sélectionner tout sur la page.
Donc, ce n'est pas quelque chose que vous voulez vraiment faire tout ce que souvent, mais il ressemble à cela.
Ensuite, tout ce que nous faisons s'appliquera à chaque élément.
Donc, je vais donner à tout un élément d'un pixel solide gris clair et vous pouvez voir quand je fais que chaque élément unique sur la page du corps H-1 chaque lien.
Ally in H pour tous obtenir la frontière autour.
Donc ce n'est pas quelque chose que vous devez faire beaucoup mais vous le verrez occasionnellement.
Le prochain est les descendants Lechter et celui-ci vous allez utiliser et voir tout le temps.
Donc, la façon dont le sélecteur descendant fonctionne, c'est qu'il faut deux ou plusieurs noms de tag ou deux ou plusieurs sélecteurs et que vous les enchaînez ensemble.
Donc, vous donner un exemple si je veux sélectionner toutes les balises d'ancrage qui sont à l'intérieur d'un allié que les balises d'ancrage à l'intérieur d'un allié pas la balise d'ancrage apparaissent que tout seul.
Je veux sélectionner toutes les balises d'ancrage qui sont les descendants d'un allié.
Donc, pour ce faire, la syntaxe ressemble à l'espace allié, puis à la balise d'ancrage.
Donc, cela va sélectionner tout ce qui est une étiquette d'âge à l'intérieur d'un allié et nous pourrions continuer avec cela.
Si nous en avions plus, je pouvais aussi réécrire ceci comme ça chaque marqueur d'ancrage qui est à l'intérieur d'un allié qui est à l'intérieur d'une UL qui est ce que nous avons ici mais qui est redondant dans notre cas.
Et je pourrais aussi dire à chaque ancre tangere tout avec la classe Hello.
À l'intérieur d'un allié, mais nous n'avons pas de balisage qui correspond à cela.
Donc, chaque marqueur d'ancrage à l'intérieur d'un allié.
Et donnons-lui juste une couleur de rouge et nous rafraîchissons.
Et vous pouvez voir ces trois balises d'ancrage sont rouges.
Celui-ci est inchangé.
Ensuite, le sélecteur adjacent.
Donc avec le sélecteur adjacent va faire, c'est comme nous allons sélectionner les éléments qui viennent après un autre élément.
Donc pas imbriqué à l'intérieur comme ça, c'est un allié imbriqué dans un puits.
Il nous permet de sélectionner un frère ou une sœur.
Donc, nous allons choisir tous les ULS qui viennent après un H pour et après après nous entendons juste sur le même niveau.
Donc pas indentée pas à l'intérieur de la fourchette, mais directement après juste comme un frère sur le même niveau d'un H pour elle.
C'est ce qu'on appelle le sélecteur adjacent et ça ressemble à ça.
Nous allons dire quatre ans plus vous.
Donc, sans le plus ce serait tous nous à l'intérieur et âge 4 mais avec le plus.
C'est juste nous qui sont adjacents à un âge de 4 ans.
Et je vais juste donner une frontière, faisons quatre pixels rouges solides et nous devrions voir ces deux UL qui sont adjacentes.
Ils viennent après cet âge quatre sur le même niveau ont une bordure rouge.
Donc un de plus que je veux montrer cela et c'est aussi un vraiment important est appelé le sélecteur d'attribut.
Ainsi, le sélecteur d'attribut est un moyen de sélectionner des éléments basés sur un attribut quelconque.
Donc, dans notre cas, nous allons faire une sélection basée sur l'attribut H ref.
Nous allons vérifier que nous allons tourner tous les liens vers Google où H.F. est dot com de Google.
Nous allons en faire une couleur, mais vous pouvez également l'utiliser pour sélectionner toutes les images d'une source particulière ou toutes les entrées d'un type particulier comme toutes les cases à cocher ou tous les champs de mot de passe ou quelque chose.
Donc, la syntaxe que nous tapons ancrage tag, puis les accolades carrés et puis à l'intérieur, nous allons taper l'attribut que nous recherchons.
Donc Tref est égal et alors nous allons faire les liens vers Google.
Donc, cela va sélectionner chaque marque d'ancrage avec HGF égal à cela et puis nous allons juste lui donner une couleur permet de lui donner un fond bleu et vous pouvez voir ces deux liens.
Cette première va à Google et la seconde va à Google.
Ils sont donc bleus.
Mais les deux autres liens ne vont pas à Google.
Ils vont à Facebook et de le lire.
Ils sont donc inchangés.
Donc, vous pouvez aussi et vous verrez vraiment ce un lot ou aura un type d'entrée est égal au texte si vous voulez qu'il style toutes les entrées de texte différemment ou si vous voulez qu'il le style de toutes les cases à cocher une façon parce que toutes les entrées, même si il ya tellement Beaucoup de différentes entrées de couleur pour les entrées de couleur et les images de fichier et mot de passe et les courriels et soumettre des boutons, ils sont tous un tag d'entrée.
Donc, juste pour sélectionner par entrée va nous donner tous les différents types d'intrants.
Nous sélectionnons donc souvent par type.
Revenons donc à notre sélecteur de références Google.
Donc il ya un de plus que je veux parler ici qui est appelé Fin de type et la façon dont la fin de type fonctionne, c'est qu'il prend un nombre comme trois ou cinq.
Et puis il sélectionne chaque fin d'un élément spécifique.
Donc, si je veux sélectionner chaque cinquième div ou allié tous les deux ou le cinquième le dixième paragraphe sur une page que je pourrais utiliser et de type.
Donc, dans ce cas, Drona sélectionner le UL final et faire quelque chose à la finale.
Eh bien le troisième.
Disons que je veux lui donner une frontière différente ou d'arrière-plan différent, je vais choisir bien colon et de type et puis un nombre comme trois.
Et puis je vais vous dire les antécédents.
Et donnons-lui l'arrière-plan évident comme le pourpre et vous pouvez voir seulement le troisième vous avez rendu bien le pourpre.
Donc c'est utile si vous voulez sélectionner quelque chose dans la page.
Une chose que je devrais noter cependant est la manière dont cela fonctionne est allons à un allié et changons un troisième mensonge.
Et avant que je le fasse, je veux que vous imaginiez ce que vous pensez que cela va se passer.
Alors c'est censé choisir le troisième allié.
Donc, ce serait ici, je pense.
Mais comme il rafraîchir, vous verrez qu'il sélectionne réellement chaque troisième mensonge.
Donc de chaque groupe d'alliés, il va sélectionner le troisième.
Et si j'avais un tas plus.
Il est important de noter que c'est encore seulement comme le troisième dans un groupe donné, donc ce n'est pas tous les trois comme si elle sélectionnerait asperges à nouveau et asperges à nouveau, c'est juste dans chaque groupe d'entre eux il va sélectionner le troisième.