Seletores CSS :not e :nth-child - Curso de HTML e CSS - Aula 19

Fala aí pessoal continuando aí com o nosso curso de html CSS nesse vídeo a gente vai falar do seletor CSS Note que é o seletor de negação e o and child palavra super complicada de falar então vamos falar nth child que é mais simples de entender tá esse seletor são um pouquinho mais avançados do que os seletores que a gente viu nas aulas anteriores mas nada complexo eu vou te explicar de um jeito aqui que você vai entender os dois facilmente sempre lembrando também continua testando aí escreve o código testa tenta selecionar alguma coisa para

você pegar a prática disso aqui tá eu falo isso eu acho que em todos os vídeos mas eu gosto que você faça o código junto comigo faça testes enfim comenta aí faz alguma coisa para você fixar isso na sua cabeça lá na frente você tem muito mais facilidade de criar o seu site tá sempre lembrando também mais uma informação que essa aula faz parte de um curso muito maior e o link do curso completo tá aí na descrição gratuito e aqui no YouTube ainda é uma playlist com todas as aulas desse curso mas sem mais

delongas vamos lá falar sobre esse seletores mais avançados aqui do CSS essa seleção de negação que eu te falei na última aula no finalzinho Ela é super interessante quando você quer exatamente negar alguma coisa né meio Óbvio isso mas às vezes a gente precisa fazer isso por exemplo Suponha que eu tenha lá na minha página um monte de parágrafo por exemplo eu tenho lá os lorem que a gente tá acostumado então tem tem lá na página várias coisas e num desses parágrafos eu tenho a classe meio por exemplo só como exemplo aqui Suponha que eu

queira selecionar todos os parágrafos a gente já viu isso a gente pode fazer P E aí colocar sei lá color Blue então todo parágrafo tem cor azul né no caso só que Imagine que eu queira falar todos os parágrafos menos o parágrafo tem a classe meio por exemplo eu posso usar A negação Ou seja todos os parágrafos menos que é o norte lá no caso e aí aqui eu ponho a condição que eu quero por exemplo todos os parágrafos menos o que tem a classe meio E aí eu seleciono esse e esse aqui todos os

outros parágrafos da página mas todos que tiverem a classe meio por exemplo não serão selecionados então isso aqui que o seletor de not né de negação faz por exemplo se eu tiver um input aqui aquele do checkbox eu tenho estado de marcado e não marcada e até Ficou ali a nossa a nossa seleção que a gente fez Mas a gente pode fazer o invertido quer ver deixa eu ver na onde que tá ó empute chat mas P então Imagine que eu queira o inverso disso então eu quero alguma o input mesma coisa que só que

é o inverso né no caso eu quero que quando ele não estiver checado o p que tá depois dele fica com background de uma cor Então posso falar note E aí chat aqui dentro né da condição aí mais alguma coisa não background por exemplo vou colocar Yellow só para a gente ver então agora eu tô falando quando o input não estiver checado E aí tiver um p logo depois dele esse P vai ter o fundo amarelo então quando eu marcar ele tem um fundo vermelho porque o cai nessa Quina que ele tá marcado quando eu

desmarcar que eu é negação no caso ele faz isso daqui Beleza então é basicamente isso que esse negação faz ele é um inverso do Normal né no caso então se eu quiser fazer uma coisa é quando uma coisa não ocorrer quando eu quiser negar uma coisa eu vou utilizar esse note aqui então a esse seletor ele vai selecionar de um grupo de irmãos Alguns irmãos e fazer alguma coisa com eles Beleza então é basicamente isso eu vou te mostrar na prática que eu acho mais fácil de entender então vamos colocar aqui um grupo de irmãos

por exemplo a gente pode colocar na ueli porque geralmente na web é garantido da gente ter irmãos Então vou colocar uma ou ele com vários itens aqui beleza vários mesmo então tem uma uma lista aqui com vários itens E aí que que eu posso fazer eu posso selecionar os itens que na posição indicada que estão na posição ímpar por exemplo o índice aqui dos elementos começa em um aqui né De acordo com a ndn aqui então comecem um dois três quatro cinco por que que eu tô te falando isso porque eu posso selecionar baseado no

índice então por exemplo deixa eu apagar tudo aqui ó e aí a gente fica só só com n th Thiago então eu quero selecionar da UEL aqui no caso li eu vou selecionar NT H chaire beleza os elementos precisam ser irmãos e aqui eu tô colocando um dois olha o que que vai acontecer ali ó Red vou colocar essa cor aqui ó quando eu coloco esse número sozinho aqui indica o índice que eu quero então desses irmãos aqui qual o índice que eu quero eu quero o índice 2 então o índice 2 foi selecionado Ah

eu quero o índice 3 muda para o índice 3 eu quero índice 1 o índice 1 tá aqui selecionado então eu posso escolher qual deles eu quero selecionar beleza mas eu também posso selecionar somente os pares então todos os pares foram selecionados a dois quatro seis oito dez e assim por diante e eu posso selecionar somente os ímpares E aí para os pares é a palavra pai em inglês que é even ou ímpar Squad aqui no caso então seleciona todos os ímpares por exemplo eu poderia selecionar todos os pares fazendo isso aqui né todos os

ímpares fazendo outra coisa por exemplo e vem no caso aqui e no iven eu vou colocar outra cor por exemplo Então eu tenho nos pares nos ímpares a cor roxinha e nos pares essa cor dar turcoise ali beleza Além disso eu também posso fazer umas outras os outros tipos de seleções que ficam que começam as continhas aqui ó por exemplo eu posso falar 5n aqui no caso isso significa de cinco em cinco basicamente tá então 5 10 15 e assim por diante Vamos colocar aqui ó para a gente fazer aqui de por exemplo três em

três é só para a gente ter de três em três a gente vai ter uma outra cor aqui eu vou mudar para alguma outra cor qualquer aqui Eita Dark vou colocar esse aqui é muito parecida com a outra cor ali então vou colocar outra aqui vou colocar esse aqui vou ficar feio para caramba mais de três em três vai acontecer isso ó 3 e aí mais três pulou ó tá vendo ó pensa comigo um dois três entrou um aí no caso Entra de novo um dois três um dois três um dois três Beleza então é

basicamente de três em três quando eu falo esse n5 Mas eu também posso falar é de outro jeito que eu posso falar assim ó é 3n + 5 então o que que vai acontecer aqui agora deixa eu mudar a cor aqui só para a gente ver dar que alguma outra cor vermelha então aqui o que que aconteceu eu falei que de três ali ó mostra a conta se você for bom em matemática no caso aqui você pode ver a conta que tem três N + 4 aí a gente mostra a conta certinho aqui mas aqui

é basicamente assim ó é começando do Quinto Elemento daí eu vou contar de três em três então ó um dois três quatro cinco Beleza então aí no Quinto Elemento já começa e agora eu vou contar um dois três um dois três um dois três beleza eu acho que assim é mais fácil de entender sempre que eu falar começando do cinco eu vou fazer isso aqui e aí se a gente quiser mudar começando do 10 por exemplo eu vou começar a contar de três em três então um dois três quatro cinco seis sete oito nove dez

um dois três e aí um dois três até o final Beleza então é basicamente isso que esse esse seletor aqui faz E aí lembra disso Eu tô trabalhando com irmãos então sempre tem que ter um grupo de irmãos poderiam ser peso por exemplo poderia ser o l aqui que a gente já viu anteriormente só para como exemplo Vamos mudar aqui para pesca e vou colocar só um dois três em cada um deles ó vou duplicar aqui um monte de P E aí eu posso fazer exatamente a mesma coisa com os meus pêsames aqui só que

agora o seletor que E então todo P que for irmão vai ter esse aqui poderia ser uma clássico qualquer coisa que você quiser tô colocando só como exemplo aqui algumas coisas que vai funcionar exatamente da mesma maneira porque esses pés são irmãos Se não fossem irmãos que a gente já falou aqui ó que são todos filhos do mesmo pai aqui no caso essa sala seleção aqui não funcionaria Beleza então basicamente assim que ele funciona