1
00:00:00,630 --> 00:00:04,510
Dans cette vidéo, nous allons parler de quelques autres façons de sélectionner des éléments.

2
00:00:04,590 --> 00:00:07,530
Mis à part les trois principaux que nous avons vu jusqu'à présent.

3
00:00:08,070 --> 00:00:37,780
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.

4
00:00:37,800 --> 00:00:42,290
Ce sont donc trois façons possibles de sélectionner des éléments, mais il y en a beaucoup plus.

5
00:00:42,660 --> 00:00:47,310
Et nous allons nous concentrer sur cinq ici et ces cinq sont ceux qui, je pense, sont les plus importants les plus courants.

6
00:00:47,460 --> 00:00:49,020
Mais il y en a beaucoup plus.

7
00:00:49,230 --> 00:00:54,330
En fait il ya cet article que j'ai lié à et la description sur Tutt's Plus c'est un article gratuit.

8
00:00:54,330 --> 00:00:55,350
C'est vraiment super.

9
00:00:55,350 --> 00:01:01,710
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.

10
00:01:01,920 --> 00:01:05,700
Vous allez naturellement mémoriser les plus importants et ceux que nous utilisons tout le temps.

11
00:01:05,910 --> 00:01:11,850
Mais le point de cet article est de dire qu'il ya au moins 30 bonnes que vous devez savoir.

12
00:01:11,910 --> 00:01:17,030
Sans mentionner si ce sont les 30 seulement que vous avez besoin de mémoriser qui est encore un peu.

13
00:01:17,130 --> 00:01:20,980
Et il ya beaucoup plus que cet article suggère que vous n'avez pas besoin de connaître.

14
00:01:21,120 --> 00:01:23,590
Donc, le point est qu'il ya beaucoup de façons différentes de le faire.

15
00:01:23,610 --> 00:01:29,270
Cet article met en évidence 30 d'entre eux et je vais juste passer par cinq ou six des plus importants.

16
00:01:29,460 --> 00:01:31,300
Donc, je recommande que vous donniez ceci une lecture à travers.

17
00:01:31,320 --> 00:01:40,340
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.

18
00:01:40,770 --> 00:01:43,060
J'ai donc un HMO de base.

19
00:01:43,470 --> 00:01:45,920
Je ne vais pas passer par le processus de création du fichier.

20
00:01:45,960 --> 00:01:55,190
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.

21
00:01:55,650 --> 00:01:57,860
Nous avons un lien vers Google.

22
00:01:57,960 --> 00:02:00,190
Nous avons une UL avec trois alliés.

23
00:02:00,600 --> 00:02:15,860
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.

24
00:02:16,180 --> 00:02:19,540
Ensuite, l'autre va à Facebook et le dernier va le lire.

25
00:02:19,590 --> 00:02:20,650
Marquage si simple.

26
00:02:20,970 --> 00:02:23,520
Et puis j'ai une feuille de style inclus appelé sélecteurs.

27
00:02:23,540 --> 00:02:38,360
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.

28
00:02:38,730 --> 00:02:43,930
Donc, ce n'est pas quelque chose que vous voulez vraiment faire tout ce que souvent, mais il ressemble à cela.

29
00:02:44,080 --> 00:02:47,930
Ensuite, tout ce que nous faisons s'appliquera à chaque élément.

30
00:02:48,750 --> 00:03:02,800
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.

31
00:03:02,960 --> 00:03:06,800
Ally in H pour tous obtenir la frontière autour.

32
00:03:07,080 --> 00:03:11,260
Donc ce n'est pas quelque chose que vous devez faire beaucoup mais vous le verrez occasionnellement.

33
00:03:11,550 --> 00:03:17,970
Le prochain est les descendants Lechter et celui-ci vous allez utiliser et voir tout le temps.

34
00:03:18,030 --> 00:03:27,150
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.

35
00:03:27,150 --> 00:03:41,350
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.

36
00:03:41,580 --> 00:03:45,860
Je veux sélectionner toutes les balises d'ancrage qui sont les descendants d'un allié.

37
00:03:46,170 --> 00:03:53,340
Donc, pour ce faire, la syntaxe ressemble à l'espace allié, puis à la balise d'ancrage.

38
00:03:53,970 --> 00:03:59,610
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.

39
00:03:59,610 --> 00:04:10,680
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.

40
00:04:11,460 --> 00:04:16,440
Et je pourrais aussi dire à chaque ancre tangere tout avec la classe Hello.

41
00:04:16,560 --> 00:04:20,070
À l'intérieur d'un allié, mais nous n'avons pas de balisage qui correspond à cela.

42
00:04:20,070 --> 00:04:22,120
Donc, chaque marqueur d'ancrage à l'intérieur d'un allié.

43
00:04:22,350 --> 00:04:28,720
Et donnons-lui juste une couleur de rouge et nous rafraîchissons.

44
00:04:29,100 --> 00:04:32,460
Et vous pouvez voir ces trois balises d'ancrage sont rouges.

45
00:04:32,490 --> 00:04:34,690
Celui-ci est inchangé.

46
00:04:35,580 --> 00:04:38,400
Ensuite, le sélecteur adjacent.

47
00:04:38,970 --> 00:04:44,980
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.

48
00:04:45,030 --> 00:04:49,910
Donc pas imbriqué à l'intérieur comme ça, c'est un allié imbriqué dans un puits.

49
00:04:50,100 --> 00:04:52,200
Il nous permet de sélectionner un frère ou une sœur.

50
00:04:52,350 --> 00:05:01,200
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.

51
00:05:01,200 --> 00:05:07,970
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.

52
00:05:07,980 --> 00:05:11,410
C'est ce qu'on appelle le sélecteur adjacent et ça ressemble à ça.

53
00:05:11,670 --> 00:05:16,780
Nous allons dire quatre ans plus vous.

54
00:05:16,890 --> 00:05:21,920
Donc, sans le plus ce serait tous nous à l'intérieur et âge 4 mais avec le plus.

55
00:05:21,960 --> 00:05:24,810
C'est juste nous qui sont adjacents à un âge de 4 ans.

56
00:05:24,990 --> 00:05:34,080
Et je vais juste donner une frontière, faisons quatre pixels rouges solides et nous devrions voir ces deux UL qui sont adjacentes.

57
00:05:34,080 --> 00:05:40,740
Ils viennent après cet âge quatre sur le même niveau ont une bordure rouge.

58
00:05:40,920 --> 00:05:46,170
Donc un de plus que je veux montrer cela et c'est aussi un vraiment important est appelé le sélecteur d'attribut.

59
00:05:46,410 --> 00:05:51,270
Ainsi, le sélecteur d'attribut est un moyen de sélectionner des éléments basés sur un attribut quelconque.

60
00:05:51,660 --> 00:05:56,620
Donc, dans notre cas, nous allons faire une sélection basée sur l'attribut H ref.

61
00:05:56,970 --> 00:06:01,920
Nous allons vérifier que nous allons tourner tous les liens vers Google où H.F. est dot com de Google.

62
00:06:01,920 --> 00:06:15,210
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.

63
00:06:15,210 --> 00:06:24,290
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.

64
00:06:24,540 --> 00:06:32,850
Donc Tref est égal et alors nous allons faire les liens vers Google.

65
00:06:32,850 --> 00:06:50,530
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.

66
00:06:50,520 --> 00:06:53,650
Cette première va à Google et la seconde va à Google.

67
00:06:53,820 --> 00:06:54,750
Ils sont donc bleus.

68
00:06:54,870 --> 00:06:57,270
Mais les deux autres liens ne vont pas à Google.

69
00:06:57,270 --> 00:06:59,340
Ils vont à Facebook et de le lire.

70
00:06:59,340 --> 00:07:01,030
Ils sont donc inchangés.

71
00:07:01,800 --> 00:07:30,170
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.

72
00:07:30,420 --> 00:07:34,460
Donc, juste pour sélectionner par entrée va nous donner tous les différents types d'intrants.

73
00:07:34,500 --> 00:07:37,580
Nous sélectionnons donc souvent par type.

74
00:07:37,620 --> 00:07:42,680
Revenons donc à notre sélecteur de références Google.

75
00:07:43,650 --> 00:07:51,710
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.

76
00:07:51,930 --> 00:07:55,710
Et puis il sélectionne chaque fin d'un élément spécifique.

77
00:07:55,710 --> 00:08:08,390
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.

78
00:08:08,400 --> 00:08:15,120
Donc, dans ce cas, Drona sélectionner le UL final et faire quelque chose à la finale.

79
00:08:15,130 --> 00:08:17,570
Eh bien le troisième.

80
00:08:18,210 --> 00:08:33,410
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.

81
00:08:33,860 --> 00:08:35,750
Et puis je vais vous dire les antécédents.

82
00:08:36,080 --> 00:08:47,400
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.

83
00:08:47,400 --> 00:08:51,420
Donc c'est utile si vous voulez sélectionner quelque chose dans la page.

84
00:08:51,420 --> 00:09:00,370
Une chose que je devrais noter cependant est la manière dont cela fonctionne est allons à un allié et changons un troisième mensonge.

85
00:09:00,480 --> 00:09:04,120
Et avant que je le fasse, je veux que vous imaginiez ce que vous pensez que cela va se passer.

86
00:09:04,170 --> 00:09:08,160
Alors c'est censé choisir le troisième allié.

87
00:09:08,400 --> 00:09:10,960
Donc, ce serait ici, je pense.

88
00:09:11,220 --> 00:09:15,170
Mais comme il rafraîchir, vous verrez qu'il sélectionne réellement chaque troisième mensonge.

89
00:09:15,390 --> 00:09:19,620
Donc de chaque groupe d'alliés, il va sélectionner le troisième.

90
00:09:20,210 --> 00:09:24,370
Et si j'avais un tas plus.

91
00:09:26,520 --> 00:09:41,790
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.