Neste vídeo, vamos falar sobre algumas outras formas de selecionar elementos.
Além dos três principais que já vimos até agora.
E apenas para recapitular esses três são o
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
de arte ou hash e o que quer que colocamos dentro direcionará um ID ou uma classe ou todos elementos
de um tipo.
Então, são três maneiras possíveis de selecionar elementos, mas há muito mais.
em cinco aqui e esses cinco são aqueles que eu acho que são os mais importantes os mais comuns.
E vamos nos concentrar
Mas há muito mais.
Na verdade, há este artigo com o qual eu liguei e a descrição no Tutt's Plus é um artigo gratuito.
É realmente ótimo.
É chamado de 30 seletores CSSA que você deve memorizar e, antes de entrar em pânico, não precisa
memorizar estes.
Você naturalmente memorizará os mais importantes e os que usamos o tempo todo.
Mas o ponto deste artigo é dizer que existem pelo menos 30 coisas boas que você deveria saber.
Para não mencionar se estes são os únicos 30 que você precisa memorizar, isso ainda é um pouco.
E há muito mais que este artigo sugere que você não precisa saber.
Então, o ponto é que existem muitas maneiras diferentes de fazer isso.
Este artigo destaca 30 deles e só vou passar por cinco ou seis dos
mais importantes.
Então eu recomendo que você dê uma leitura por este.
Haverá um exercício no próximo vídeo que abrange muito do que está coberto neste artigo, bem
como o que abordamos aqui e nosso editor de texto.
Então eu tenho um HMO básico.
Não vou passar pelo processo de criação do arquivo.
Este não é aquele que você necessita necessariamente codificar, mas é um elemento básico
que o afim parece ser esse, onde temos um H1.
Temos um link que vai para o Google.
Temos uma UL com três aliados.
H para e depois outro você vai com três aliados e depois outros quatro e depois um mais você vai
com três aliados, mas cada aliado agora tem um link e o primeiro também vai para o Google como este link aqui.
Então nós temos um
Então o outro vai para o Facebook e o último vai lê-lo.
Então, uma marcação simples.
E então eu tenho uma folha de estilos incluída chamada seletores.
SS Então, aqui, vamos preencher o RC SS. Então, o primeiro que vamos falar
é o seletor D-Star e é com um asterisco e ele irá selecionar tudo na página.
Então, isso não é algo que você realmente deseja fazer tudo isso, muitas vezes, mas parece assim.
E então, o que quer que façamos, realmente se aplicará a cada elemento.
Então eu vou dar tudo um elemento de um pixel sólido cinza claro e você pode ver quando eu faço isso
com cada elemento na página do corpo H-1 cada link.
Ally in H for all get border around.
Então, isso não é algo que você precisa fazer muito, mas você vai vê-lo ocasionalmente.
O próximo é o descendente Lechter e este você usará e verá o tempo todo.
Assim, a maneira como o seletor descendente funciona é que é necessário dois ou mais nomes de tag ou
dois ou mais seletores e você os encadena.
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.
Então, dê um exemplo se eu quiser selecionar todas as tags de âncora que
Eu quero selecionar todas as tags de âncora que são descendentes de um aliado.
Então, para fazer isso, a sintaxe parece o espaço de Ally e depois a tag de âncora.
Então, isso irá selecionar tudo que é uma etiqueta de idade dentro de um aliado e nós poderíamos continuar com isso.
Se tivéssemos mais, eu também poderia reescrever isso como essa, toda marca de âncora que esteja dentro de um aliado que
esteja dentro de uma UL, que é o que temos aqui, mas isso é redundante no nosso caso.
E eu também poderia dizer todas as âncoras tangere tudo com a classe Olá.
Dentro de um aliado, mas não temos nenhuma marcação que corresponda a isso.
Então, cada marca de âncora dentro de um aliado.
E vamos dar uma cor de vermelho e nós atualizamos.
E você pode ver essas três tags de âncora serem vermelhas.
Este é inalterado.
Em seguida, é o seletor adjacente.
Assim, com o seletor adjacente vai fazer, ele vai gostar, deixe-nos selecionar elementos que vêm após outro
elemento.
Então, não é aninhado dentro, como este é um aliado aninhado em um poço.
Isso nos permite selecionar um irmão.
Então, vamos selecionar todos os ULS que vêm após um H para e depois, queremos dizer, apenas no mesmo nível.
Então, não recuou, não dentro do garfo, mas diretamente depois de um irmão no mesmo nível de um H
para isso.
Então, isso é chamado de seletor adjacente e parece assim.
Vamos dizer quatro anos mais você vai.
Então, sem a vantagem, isso seria tudo dentro e idade 4, mas com a vantagem.
Apenas somos nós que são adjacentes a uma idade de 4 anos.
E eu vou dar uma borda, vamos fazer quatro pixels de vermelho sólido e devemos ver esses dois UL que
são adjacentes.
Eles vêm depois desta idade quatro no mesmo nível têm uma borda vermelha.
Então, mais um que eu quero mostrar isso e isso também é muito importante, é chamado de
seletor de atributos.
E assim, o seletor de atributos é uma maneira de selecionar elementos com base em qualquer atributo.
Então, no nosso caso, vamos fazer uma seleção com base no atributo H ref.
Vamos verificar que vamos mudar todos os links para o Google onde H. F. é Google dot com.
Nós vamos fazer uma cor, mas você também pode usar isso para selecionar todas as imagens de uma
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.
Então, a sintaxe, nós escrevemos uma marca de âncora e depois chaves quadradas e, em seguida, dentro, vamos digitar o atributo
que estamos procurando.
Então, Tref é igual e então vamos fazer os links para o Google.
de âncora com HGF igual a isso e então vamos dar uma cor, vamos dar um fundo azul e você pode
ver esses dois
links.
Então, isso irá selecionar cada tag
Este primeiro é para o Google e o segundo é para o Google.
Então eles são azuis.
Mas os outros dois links não vão para o Google.
Eles vão para o Facebook e lê-lo.
Então, eles são inalterados.
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
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.
Então, você também pode, e você realmente verá muito isso ou terá um tipo de entrada igual ao texto, se
quiser que ele tenha estilo de todas as entradas de texto
Então, apenas para selecionar por entrada, vai nos dar todos os diferentes tipos de entradas.
Então, muitas vezes, selecione por tipo.
Então, vamos voltar para o nosso seletor de referência do Google.
Então, há mais um que eu quero falar aqui, que se chama End of type e a maneira
como o fim do tipo funciona, é preciso um número como três ou cinco.
E então ele seleciona cada extremidade de um elemento específico.
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
usar e de tipo.
Então, neste caso, Drona selecione a UL final e faça algo para a final.
Bem, o terceiro.
Digamos que eu quero dar uma fronteira diferente ou um segundo plano diferente, vou selecionar Poço bem e de tipo
e depois um número como três.
E então vou dizer fundo.
E vamos dar-lhe um fundo óbvio como roxo e você pode ver apenas o terceiro, você ficou bem roxo.
Então, isso é útil se você deseja selecionar algo na página.
Uma coisa que eu devo notar é que a maneira como isso funciona é ir para um aliado e mudar uma
terceira mentira.
E antes que eu faça isso, quero que você imagine o que você acha que vai acontecer.
Então, é suposto selecionar o terceiro aliado.
Então, essa seria essa aqui, acho.
Mas, à medida que atualiza, você verá que ele realmente seleciona cada terceira mentira.
Então, de cada grupo de aliados, ele vai selecionar o terceiro.
E então, se eu tivesse um monte mais.
É importante notar que ainda é tão parecido com o terceiro em um determinado grupo, então
não é todo o terceiro como se ele selecionasse os espargos novamente e depois os espargos novamente, é apenas em cada
grupo deles, ele vai selecionar o terceiro.
No entanto, há uma maneira de conseguir selecionar um número par para que eu possa selecionar todos os outros aliados
e torná-lo como roxo assim