fala pessoal continuando aqui com nossos com os nossos seletores de CSS nessa nesse vídeo A gente vai ver os seletores de seu do classes essas pseudoclasses aqui ó já abriu o link aqui da mdn elas refletem o estado de algum elemento como a gente está trabalhando com uma interface aqui né os elementos têm Estado então pode ser que eu tenha por exemplo um elemento que tá marcado igual esse caso aqui pode ser que eu tenho um elemento que eu tô passando o mouse sobre ele pode ser que eu tenho um elemento que eu tô clicado
acabei de clicar nesse elemento enfim tem vários estados que a gente pode manipular aqui no caso o como eu te falei eu deixei aberto aqui e são muitos aqui ó são muitas pessoas do classes que a gente tem eu não vou falar de todas aqui nessa aula especificamente mas eu separei algumas que são super importantes aqui da gente entender e uma das mais comuns é basicamente esse aqui ó tá vendo que quando eu passo o mouse sobre aqui ó ele muda a aparência dele que a gente pode fazer isso aqui no nosso também por exemplo
deixa eu apagar SSS aqui ó que a gente não precisa mais dele mas imagine que quando eu passar o mouse nesse H1 acho que é H1 né é um H1 eu queira fazer alguma coisa mudar o estilo dele para alguma coisa eu posso usar a classe eu posso usar a tag ou Enfim eu posso selecionar esse elemento e daí utilizar uma pseudoclasse essa pseudocci ó vou utilizar a classe A pseudoclasse vem depois do dois pontos aqui então aqui depois dos dois pontos eu vou colocar o que eu quero o que que eu quero quando o
mouse está sobre o elemento E aí sobre o elemento vai ser Rover Ou seja quando eu passar o mouse sobre o elemento Eu quero um background Red por exemplo então agora se eu passo Mouse sobre o meu elemento ele fica vermelhinho assim beleza E daí eu posso fazer o que eu quiser aqui a mais né no caso por exemplo é uma coisa interessante que a gente pode fazer no eu pegar essa classe Reading e fala assim ó nessa nesse elemento aqui toda transição que ocorrer toda classe que mudar por exemplo toda propriedade que mudar nesse
elemento eu quero que aconteça algum efeitinho então eu vou falar assim ó transition e aí eu vou falar todas ao eu vou falar quanto tempo que eu quero é pode ser em segundos por exemplo um segundo e aqui eu vou falar como que eu quero que esse efeito ocorra no caso então eu vou colocar easy em Alt E aí agora quando eu passar o mouse Olha o que que acontece que interessante porque ele tá mudando uma propriedade então ele tá usando isso daqui que eu te falei a transição para para mostrar como que essa transição
ocorre aqui no caso então aqui eu posso colocar um em segundos ou em Mili segundos MS E aí ó você vê por exemplo se eu colocar 300 MS ó fica mais rapidinho bem mais rapidinho beleza aí a gente vê a transição ocorrendo essa não funciona em todas as propriedades do CS CSS aqui no caso mas algumas igual background que é super interessante de ver ocorrendo Beleza então a gente tem o elemento Rover esse Rover também é muito utilizado com o links então se eu tivesse aqui nesse lorem um link no caso eu vou colocar só
um Cerquilho aqui no link que só para exemplo vou colocar esse Loren y/a E aí eu posso ele fechou aqui eu fechei também então a gente brigou aqui para fechar para ver quem que fechava o link ali lá de novo Beleza então agora eu tenho um link aqui né E aí presta atenção no estado do link ó tá vendo que ele tá roxinho assim isso é um estado de um link visitado e a gente pode manipular isso também mas vamos olhar outras coisas aqui ó vou colocar um outro link aqui ó que eu nunca Visitei
para você ver que ele vai ficar com a cor diferente ó vou colocar aqui nesse aqui ó nunca fui visitar e talvez você vê esse aqui tá numa cor esse outro aqui tá no tecor então isso são estados que a gente pode utilizar para para configurar o nosso link para a gente configurar um link normal a gente pode usar o classes Ou a gente pode usar o a tag né no caso não por exemplo vou colocar um background em todos os links de red no caso aqui beleza então todos os links tem o background aqui
mas aliás ao invés de background ficou muito esquisito ali eu vou colocar uma Collor todos os links tem uma cor pode ser Dark Orange beleza mas aí a partir disso aqui agora eu posso colocar cores diferentes para links que não foram visitados e para links que foram visitados então por exemplo se eu pego a e falo a pseudocci link quer dizer link que eu nunca Visitei então a cor dos links que eu nunca Visitei vai ser sei lá de Pink por exemplo eu salvando você vê que aquele link que eu nunca tinha visitado ficou daquela
corzinha ali mas eu também posso colocar nos que foram visitados E aí os que foram visitados vão ser com visitad beleza então aqui eu tenho todos os links aqui eu tenho o link que nunca foi visitado e aqui eu tenho o link que já foi visitado E aí eu posso colocar a cor nele aqui de Fire Break por exemplo E aí ele mudou a cor ali Além disso aqui eu também tenho o a pseudoclass Rover que a gente viu anteriormente então quando eu passar o mouse sobre isso aqui Suponha que eu queira que ele fique
com background de uma cor vamos ver uma cor aqui mais escura dar que vou colocar Dark sei lá Blue ali e color White e eu quero que ele não tenha aquela linha embaixo text decoration None então quando eu passar o mouse sobre esses links ó ele muda para cor branca fundo daquela cor ali e some ali embaixo ó tá vendo ó então é basicamente isso que pseudoclasses outras classes que a gente tem também é ainda no link a gente pode utilizar uma classe que chama Active Deixa eu te mostrar aqui ó essa classe Active indica
que um elemento Foi clicado ele tá ativo no momento ele tá clicado nesse momento Beleza então por exemplo aqui eu vou só mudar o fundo por exemplo Vamos pegar uma outra cordar aqui ó vou colocar pensar uma cor que é Vamos colocar esse aqui E aí ó quando eu clicar no link segurar o mouse ó ele fica daquela cor ali se eu soltar ele já não fica só que se eu soltar aqui ele vai tentar ir para o link né no caso não tô segurando só o mouse aqui para você ver ó segurando aqui também
ele fica ativo Beleza a gente tem também outra coisa que é interessante em Putz por exemplo vários elementos têm esse estado também Mas é interessante no input por exemplo porque a gente pode mudar é alguma coisa deixa eu aqui para cima para ficar lá em cima que da página vou por aqui em input type só vou colocar o Type Tech por exemplo E aí ó esse input aqui ele tem um estado que é tipo assim quando eu tô aqui nele ele tá em Foco beleza botões também tem isso vários elementos tem isso e eu posso
por exemplo mudar configuração dele quando eu ele tiver em foco por exemplo Suponha que eu queira pegar todo o input que tiver em Foco Focus e eu quero fazer alguma coisa com esse input por exemplo eu quero colocar uma sombra nele então Box Shadow aí eu tenho eu vou colocar só um espaçamento aqui uma sombra de sei lá rgba 0.0.0 bem um preto um pouquinho clarinho né no caso meio transparente vou dar uma configuração E aí quando o meu input tiver em Foco aparece essa sombrinha aqui do lado Tá vendo você tá vendo que ele
já vem por padrão com outline que é preto né eu posso colocar que tirar esse Alt Line None por enquanto porque eu tô configurando o foco dele então é quando eu faço essa configuração do foco aqui quer dizer que eu quero que ele tem uma borda também vamos colocar border um pixel Solid Black Aí ele vai ficar com essa bordinha preta no caso aqui e a sombrinha não sei se tá dando para você perceber que tem uma sombra do lado então quando eu entro no input ele tem uma bordinha aqui no caso tá vendo esse
é o estado de foco desse elemento aqui eu tenho outras coisas relacionadas com input aqui também que seriam quando ele tá habilitado quando ele tá desabilitado quando ele tá checado né marcado igual esse check Box aqui é que a gente falou na última aula inclusive como eu te falei ó esse input também tem foco ó se eu clico nele ele fica com a sombrinha também Beleza então vários elementos têm foco na página é então vamos colocar aqui ó o habilitado né Vamos colocar aqui esse aqui tá dizendo então ele ficou com uma configuração aqui mais
ou menos né só que eu posso vir no meu CSS mudar essa configuração fazer do jeito que eu quiser então quando ele tiver desabled no caso eu quero que o background dele seja read ou essa cor que esquisita E aí ele vai ficar assim se eu tirar esse desabled aqui ele volta ao normal Beleza então toda vez que ele tiver desabro de eu posso passar colocar um cursor tá vendo que aqui ó não muda nada meu mouse mas eu posso falar que o cursor dele vai ser por exemplo note a loud beleza e eu passando
Mouse o cursor vira um símbolo de não permitido entendeu então eu posso fazer essa configuração baseando no estado ali é uma outra coisa também que eu posso colocar se eu quiser e nablete então se ele tiver ativo agora que essa configuração vai ser ativada então se eu tirar isso aqui ó e coloca agora a configuração ficou invertida né no caso ele aplicou essa configuração enquanto o imposto estava habilitado E aí a diferença de desabled e enablet que seria deseybody enabod né em inglês significa que ou dizeibaldi ele tem o atributo de zebode e o Enade
significa que ele tá ativo tá normal beleza eu também tenho esse chat aqui E esse chefe aqui é interessante no caso que a gente pode passar a combinar algumas coisas deixa eu te mostrar aqui ó é vamos usar esses inputs aqui mesmo É pode ser esse boot aqui ó Isso põe que eu tenho eu vou deixar aqui já configurado eu vou deixar um p aqui com olá mundo então eu tenho o meu input que é esse daqui na verdade que eu tô falando né que é é esse Eu vou tirar um deles aqui ó só
para eu mesmo confundir qualquer qual ali então tenho esse input que é um check box e eu tenho esse parágrafo olá mundo e aí nesse check Box eu vou tirar isso aqui para não ficar pegando configuração dos outros ali ó nesse cake box eu posso falar olha quando esse input o tamanho dele vai ser diferente então e 50 pixels e Hight 50 pixels então quando eu marcar esse input ele fica gigante quando eu desmarca ele fica menor beleza porque ele mudou o estado Pratic ou anti-chec né no caso só que lembra que a gente já
aprendeu alguns seletores antes então tem umas coisas interessantes que a gente pode fazer inclusive que envolve um pouquinho de lógica né no caso por exemplo Lembra daquele menu que eu te mostrei na página que eu fiz anteriormente que eu usei um checkbox eu posso falar que quando esse input estiver checado no caso esse parágrafo vai mudar alguma coisa nele porque ó se a gente observar Eles são irmãos é são os dois são filhos do bari só que esse parágrafo está diretamente depois do input então eu posso selecionar o usar o adjacente lá sibling selector para
falar que quando esse input tiver checado esse P vai ter alguma coisa deixa eu te mostrar funciona esse input aqui da tchec E aí eu quero que depois dele venha um p então quando eu marcar esse input você vê que o que muda é o p só que eu só tô mudando o tamanho né deixa eu mudar o fundo para você ver background Red então quando o input tá marcado P muda para para essa cor aqui quando ele tiver desmarcado P volta a ser alguma coisa beleza então você tá baseado num elemento você tá mudando
outro elemento aqui no caso E foi exatamente assim que eu usei para fazer aquele menuzinho lá que você viu anteriormente no site eu marquei o input e esse primeiro irmão dele aqui ficou selecionado sempre foi muito comum utilizar isso aqui isso é bem antigo na verdade mas se eu tivesse outros peixes como eu só usei o adjacente aqui só o primeiro vai ser o selecionado por conta do seletor demais Ali que a gente utilizou beleza é outra coisa que a gente tem interessante também é o first e last child por exemplo muito interessante para a
gente fazer alguma coisa assim ó Suponha que eu tenho aqui uma div vou chamar de classe pai e eu vou ter uma url aqui com um li no caso aqui no vscold tem um negócio que chama emet se você digitar ali por exemplo vezes 3 ele já cria Três livros para você você só digita aqui e tem um Tab e tem dois Tab e tem três Beleza então tem uma lista já com três itens aqui você é interessante que é mais rápido né E aí eu tenho a classe pai eu vou colocar aqui classe igual
a lista E aí na lista eu tenho Lis né no caso Então vou seleciona aqui ó pai lista e é isso aí a gente quiser ver ó background Red só pra gente ver o que que tá sendo selecionado Então o que foi selecionado foram todos os likes aí tem dentro da lista só que se eu quiser só a Ford child só o primeiro filho posso selecionar somente o primeiro filho Ah eu quero só o último filho last shield Beleza então eu posso fazer esse tipo de seleção aqui inclusive dependendo do que eu tiver selecionando eu
posso selecionar mais coisas vamos ver se a gente acha mais alguma coisa interessante aqui para a gente conversar sobre focos a gente já falou em Randy in valed last child Last of Type link note é um seletor de negação esse aqui eu vou deixar para outra aula esses outros aqui ó a gente vai falar deles em outras aulas only child Não não é muito interessante enfim você pode ler esses todos aqui ó esse aqui é interessante é para inputs né então se você observar aqui ó se eu tiver um input que é eu vou colocar
só recuar de aqui ó você vai ver que eu tenho o input como eu não falei nada ele é um input do tipo texto que é requerido aqui eu posso fazer essa seleção também com a pseu faça aqui então input que for recuard vai ter o background Red só pra gente ver E aí ele é requerido ele tem um background read se eu tivesse um outro input aqui ó vou duplicar esse aqui Eita teclado não ajuda e vou tirar o require você vai ver que ele não tem isso aqui então eu posso fazer a o
meu estilo baseado no estado em que o elemento se encontra na página Então isso é muito interessante tem válido tem visitada a gente já falou target Scopel right read right enfim tem vários aqui mas eu não vou falar deles todos não porque eu vou deixar para falar desses aqui também que eu acho bem interessante a gente vai usar esse negação lá no site que eu fiz esse NT nth child também é interessante também para a gente ver em outra aula beleza
