1
00:00:00,630 --> 00:00:04,510
Neste vídeo, vamos falar sobre algumas outras formas de selecionar elementos.

2
00:00:04,590 --> 00:00:07,530
Além dos três principais que já vimos até agora.

3
00:00:08,070 --> 00:00:11,790
E apenas para recapitular esses três são o

4
00:00:14,790 --> 00:00:27,450
seletor de elementos da classe e o seletor de ID, então o elemento se parece com a classe de Ally com Dot low e ID com o símbolo

5
00:00:27,450 --> 00:00:36,420
de arte ou hash e o que quer que colocamos dentro direcionará um ID ou uma classe ou todos elementos

6
00:00:36,420 --> 00:00:37,780
de um tipo.

7
00:00:37,800 --> 00:00:42,290
Então, são três maneiras possíveis de selecionar elementos, mas há muito mais.

8
00:00:42,660 --> 00:00:46,560
em cinco aqui e esses cinco são aqueles que eu acho que são os mais importantes os mais comuns.

9
00:00:46,560 --> 00:00:47,310
E vamos nos concentrar

10
00:00:47,460 --> 00:00:49,020
Mas há muito mais.

11
00:00:49,230 --> 00:00:54,300
Na verdade, há este artigo com o qual eu liguei e a descrição no Tutt's Plus é um artigo gratuito.

12
00:00:54,330 --> 00:00:55,350
É realmente ótimo.

13
00:00:55,350 --> 00:01:00,990
É chamado de 30 seletores CSSA que você deve memorizar e, antes de entrar em pânico, não precisa

14
00:01:00,990 --> 00:01:01,710
memorizar estes.

15
00:01:01,920 --> 00:01:05,700
Você naturalmente memorizará os mais importantes e os que usamos o tempo todo.

16
00:01:05,910 --> 00:01:11,520
Mas o ponto deste artigo é dizer que existem pelo menos 30 coisas boas que você deveria saber.

17
00:01:11,910 --> 00:01:17,030
Para não mencionar se estes são os únicos 30 que você precisa memorizar, isso ainda é um pouco.

18
00:01:17,130 --> 00:01:20,980
E há muito mais que este artigo sugere que você não precisa saber.

19
00:01:21,120 --> 00:01:23,590
Então, o ponto é que existem muitas maneiras diferentes de fazer isso.

20
00:01:23,610 --> 00:01:28,680
Este artigo destaca 30 deles e só vou passar por cinco ou seis dos

21
00:01:28,680 --> 00:01:29,270
mais importantes.

22
00:01:29,460 --> 00:01:31,300
Então eu recomendo que você dê uma leitura por este.

23
00:01:31,320 --> 00:01:36,960
Haverá um exercício no próximo vídeo que abrange muito do que está coberto neste artigo, bem

24
00:01:36,960 --> 00:01:40,340
como o que abordamos aqui e nosso editor de texto.

25
00:01:40,770 --> 00:01:43,060
Então eu tenho um HMO básico.

26
00:01:43,470 --> 00:01:45,920
Não vou passar pelo processo de criação do arquivo.

27
00:01:45,960 --> 00:01:51,510
Este não é aquele que você necessita necessariamente codificar, mas é um elemento básico

28
00:01:51,510 --> 00:01:55,190
que o afim parece ser esse, onde temos um H1.

29
00:01:55,650 --> 00:01:57,860
Temos um link que vai para o Google.

30
00:01:57,960 --> 00:02:00,190
Temos uma UL com três aliados.

31
00:02:00,600 --> 00:02:07,350
H para e depois outro você vai com três aliados e depois outros quatro e depois um mais você vai

32
00:02:07,350 --> 00:02:14,460
com três aliados, mas cada aliado agora tem um link e o primeiro também vai para o Google como este link aqui.

33
00:02:14,460 --> 00:02:15,860
Então nós temos um

34
00:02:16,180 --> 00:02:19,540
Então o outro vai para o Facebook e o último vai lê-lo.

35
00:02:19,590 --> 00:02:20,650
Então, uma marcação simples.

36
00:02:20,970 --> 00:02:23,520
E então eu tenho uma folha de estilos incluída chamada seletores.

37
00:02:23,540 --> 00:02:30,510
SS Então, aqui, vamos preencher o RC SS. Então, o primeiro que vamos falar

38
00:02:30,510 --> 00:02:38,360
é o seletor D-Star e é com um asterisco e ele irá selecionar tudo na página.

39
00:02:38,730 --> 00:02:43,930
Então, isso não é algo que você realmente deseja fazer tudo isso, muitas vezes, mas parece assim.

40
00:02:44,080 --> 00:02:47,930
E então, o que quer que façamos, realmente se aplicará a cada elemento.

41
00:02:48,750 --> 00:02:57,690
Então eu vou dar tudo um elemento de um pixel sólido cinza claro e você pode ver quando eu faço isso

42
00:02:58,260 --> 00:03:02,800
com cada elemento na página do corpo H-1 cada link.

43
00:03:02,960 --> 00:03:06,800
Ally in H for all get border around.

44
00:03:07,080 --> 00:03:11,260
Então, isso não é algo que você precisa fazer muito, mas você vai vê-lo ocasionalmente.

45
00:03:11,550 --> 00:03:17,970
O próximo é o descendente Lechter e este você usará e verá o tempo todo.

46
00:03:18,030 --> 00:03:24,390
Assim, a maneira como o seletor descendente funciona é que é necessário dois ou mais nomes de tag ou

47
00:03:24,390 --> 00:03:27,150
dois ou mais seletores e você os encadena.

48
00:03:27,150 --> 00:03:36,270
estão dentro de um aliado, apenas as tags de âncora dentro de um aliado e não a marca de âncora que aparece apenas por conta própria.

49
00:03:36,270 --> 00:03:41,350
Então, dê um exemplo se eu quiser selecionar todas as tags de âncora que

50
00:03:41,580 --> 00:03:45,860
Eu quero selecionar todas as tags de âncora que são descendentes de um aliado.

51
00:03:46,170 --> 00:03:53,340
Então, para fazer isso, a sintaxe parece o espaço de Ally e depois a tag de âncora.

52
00:03:53,970 --> 00:03:59,590
Então, isso irá selecionar tudo que é uma etiqueta de idade dentro de um aliado e nós poderíamos continuar com isso.

53
00:03:59,610 --> 00:04:05,640
Se tivéssemos mais, eu também poderia reescrever isso como essa, toda marca de âncora que esteja dentro de um aliado que

54
00:04:05,700 --> 00:04:10,680
esteja dentro de uma UL, que é o que temos aqui, mas isso é redundante no nosso caso.

55
00:04:11,460 --> 00:04:16,440
E eu também poderia dizer todas as âncoras tangere tudo com a classe Olá.

56
00:04:16,560 --> 00:04:20,070
Dentro de um aliado, mas não temos nenhuma marcação que corresponda a isso.

57
00:04:20,070 --> 00:04:22,120
Então, cada marca de âncora dentro de um aliado.

58
00:04:22,350 --> 00:04:28,720
E vamos dar uma cor de vermelho e nós atualizamos.

59
00:04:29,100 --> 00:04:32,460
E você pode ver essas três tags de âncora serem vermelhas.

60
00:04:32,490 --> 00:04:34,690
Este é inalterado.

61
00:04:35,580 --> 00:04:38,400
Em seguida, é o seletor adjacente.

62
00:04:38,970 --> 00:04:44,490
Assim, com o seletor adjacente vai fazer, ele vai gostar, deixe-nos selecionar elementos que vêm após outro

63
00:04:44,490 --> 00:04:44,980
elemento.

64
00:04:45,030 --> 00:04:49,910
Então, não é aninhado dentro, como este é um aliado aninhado em um poço.

65
00:04:50,100 --> 00:04:52,200
Isso nos permite selecionar um irmão.

66
00:04:52,350 --> 00:05:01,140
Então, vamos selecionar todos os ULS que vêm após um H para e depois, queremos dizer, apenas no mesmo nível.

67
00:05:01,200 --> 00:05:07,380
Então, não recuou, não dentro do garfo, mas diretamente depois de um irmão no mesmo nível de um H

68
00:05:07,380 --> 00:05:07,970
para isso.

69
00:05:07,980 --> 00:05:11,410
Então, isso é chamado de seletor adjacente e parece assim.

70
00:05:11,670 --> 00:05:16,780
Vamos dizer quatro anos mais você vai.

71
00:05:16,890 --> 00:05:21,920
Então, sem a vantagem, isso seria tudo dentro e idade 4, mas com a vantagem.

72
00:05:21,960 --> 00:05:24,810
Apenas somos nós que são adjacentes a uma idade de 4 anos.

73
00:05:24,990 --> 00:05:33,330
E eu vou dar uma borda, vamos fazer quatro pixels de vermelho sólido e devemos ver esses dois UL que

74
00:05:33,330 --> 00:05:34,080
são adjacentes.

75
00:05:34,080 --> 00:05:40,740
Eles vêm depois desta idade quatro no mesmo nível têm uma borda vermelha.

76
00:05:40,920 --> 00:05:45,390
Então, mais um que eu quero mostrar isso e isso também é muito importante, é chamado de

77
00:05:45,390 --> 00:05:46,170
seletor de atributos.

78
00:05:46,410 --> 00:05:51,270
E assim, o seletor de atributos é uma maneira de selecionar elementos com base em qualquer atributo.

79
00:05:51,660 --> 00:05:56,620
Então, no nosso caso, vamos fazer uma seleção com base no atributo H ref.

80
00:05:56,970 --> 00:06:01,920
Vamos verificar que vamos mudar todos os links para o Google onde H. F. é Google dot com.

81
00:06:01,920 --> 00:06:07,350
Nós vamos fazer uma cor, mas você também pode usar isso para selecionar todas as imagens de uma

82
00:06:07,350 --> 00:06:15,210
determinada fonte ou todas as entradas de um tipo específico, como todas as caixas de seleção ou todos os campos de senha ou algo assim.

83
00:06:15,210 --> 00:06:23,250
Então, a sintaxe, nós escrevemos uma marca de âncora e depois chaves quadradas e, em seguida, dentro, vamos digitar o atributo

84
00:06:23,250 --> 00:06:24,290
que estamos procurando.

85
00:06:24,540 --> 00:06:32,850
Então, Tref é igual e então vamos fazer os links para o Google.

86
00:06:32,850 --> 00:06:40,470
de âncora com HGF igual a isso e então vamos dar uma cor, vamos dar um fundo azul e você pode

87
00:06:40,650 --> 00:06:41,580
ver esses dois

88
00:06:44,240 --> 00:06:44,760
links.

89
00:06:48,240 --> 00:06:50,530
Então, isso irá selecionar cada tag

90
00:06:50,520 --> 00:06:53,650
Este primeiro é para o Google e o segundo é para o Google.

91
00:06:53,820 --> 00:06:54,750
Então eles são azuis.

92
00:06:54,870 --> 00:06:57,270
Mas os outros dois links não vão para o Google.

93
00:06:57,270 --> 00:06:59,340
Eles vão para o Facebook e lê-lo.

94
00:06:59,340 --> 00:07:01,030
Então, eles são inalterados.

95
00:07:01,800 --> 00:07:10,680
de forma diferente ou se quiser que ele marque todas as caixas de seleção de uma maneira porque todas as entradas, mesmo que existam muitas

96
00:07:10,680 --> 00:07:18,600
entradas diferentes para colorir entradas e imagens de arquivos e senha e e-mails e enviar botões são todos uma tag de entrada.

97
00:07:19,110 --> 00:07:26,370
Então, você também pode, e você realmente verá muito isso ou terá um tipo de entrada igual ao texto, se

98
00:07:26,370 --> 00:07:30,170
quiser que ele tenha estilo de todas as entradas de texto

99
00:07:30,420 --> 00:07:34,460
Então, apenas para selecionar por entrada, vai nos dar todos os diferentes tipos de entradas.

100
00:07:34,500 --> 00:07:37,580
Então, muitas vezes, selecione por tipo.

101
00:07:37,620 --> 00:07:42,680
Então, vamos voltar para o nosso seletor de referência do Google.

102
00:07:43,650 --> 00:07:48,170
Então, há mais um que eu quero falar aqui, que se chama End of type e a maneira

103
00:07:48,270 --> 00:07:51,710
como o fim do tipo funciona, é preciso um número como três ou cinco.

104
00:07:51,930 --> 00:07:55,710
E então ele seleciona cada extremidade de um elemento específico.

105
00:07:55,710 --> 00:08:06,540
Então, se eu quiser selecionar cada quinto div ou cada segundo aliado ou o quinto, o décimo parágrafo em uma página que eu poderia

106
00:08:06,570 --> 00:08:08,390
usar e de tipo.

107
00:08:08,400 --> 00:08:15,120
Então, neste caso, Drona selecione a UL final e faça algo para a final.

108
00:08:15,130 --> 00:08:17,570
Bem, o terceiro.

109
00:08:18,210 --> 00:08:29,550
Digamos que eu quero dar uma fronteira diferente ou um segundo plano diferente, vou selecionar Poço bem e de tipo

110
00:08:30,030 --> 00:08:33,410
e depois um número como três.

111
00:08:33,860 --> 00:08:35,750
E então vou dizer fundo.

112
00:08:36,080 --> 00:08:45,030
E vamos dar-lhe um fundo óbvio como roxo e você pode ver apenas o terceiro, você ficou bem roxo.

113
00:08:47,400 --> 00:08:51,420
Então, isso é útil se você deseja selecionar algo na página.

114
00:08:51,420 --> 00:08:59,700
Uma coisa que eu devo notar é que a maneira como isso funciona é ir para um aliado e mudar uma

115
00:08:59,790 --> 00:09:00,370
terceira mentira.

116
00:09:00,480 --> 00:09:04,120
E antes que eu faça isso, quero que você imagine o que você acha que vai acontecer.

117
00:09:04,170 --> 00:09:08,160
Então, é suposto selecionar o terceiro aliado.

118
00:09:08,400 --> 00:09:10,960
Então, essa seria essa aqui, acho.

119
00:09:11,220 --> 00:09:15,170
Mas, à medida que atualiza, você verá que ele realmente seleciona cada terceira mentira.

120
00:09:15,390 --> 00:09:19,620
Então, de cada grupo de aliados, ele vai selecionar o terceiro.

121
00:09:20,210 --> 00:09:24,370
E então, se eu tivesse um monte mais.

122
00:09:26,520 --> 00:09:32,070
É importante notar que ainda é tão parecido com o terceiro em um determinado grupo, então

123
00:09:32,070 --> 00:09:39,180
não é todo o terceiro como se ele selecionasse os espargos novamente e depois os espargos novamente, é apenas em cada

124
00:09:39,210 --> 00:09:41,790
grupo deles, ele vai selecionar o terceiro.

125
00:09:41,790 --> 00:09:48,690
No entanto, há uma maneira de conseguir selecionar um número par para que eu possa selecionar todos os outros aliados

126
00:09:48,690 --> 00:09:50,370
e torná-lo como roxo assim