Pseudo-classes em CSS - @Curso em Vídeo HTML5 e CSS3

e vamos dar continuidade aos estudos do capítulo 15 onde a gente vai começar a falar agora sobre seu do Classe A [Aplausos] E aí [Música] o Olá tudo bem com você seja bem-vindo seja bem vindo a mais um vídeo aqui do capítulo 15 do seu curso HTML e CSS nos vídeos anteriores a gente falou sobre os seletores personalizados ah gente vai continuar falando sobre o seletor de personalizados só que dessa vez a gente vai começar a falar sobre Acho que seu do classe nós já vimos usar eles nós já vimos os classes e agora nós

vamos ver as seu do classes Beleza então você vai entender para que que serve uma opção no clássico vamos diretamente para o computador e vamos começar um exercício no antes de dar continuidade a esse vídeo eu tenho um recado bem rápido para te dar como você já deve saber esse curso de desenvolvimento web e tá caprichado por sinal só está sendo possível graças ao apoio de algumas empresas queridas do meu coração e aos poucos conforme o curso foi avançando você vai conhecendo algumas iniciativas e oportunidades que elas estão trazendo para você que ela sou Luna

que não consegui vídeo e dessa vez eu vim aqui falar da Record que é uma organização social que tá fazendo 25 anos de vida no ano que eu tô gravando esse vídeo e o seu objetivo principal é promover o que eles chamam de irem por a digital eu ainda vou mostrar umas histórias bem emocionantes por aqui você não perde por esperar e para você que é nosso aluno do curso em vídeo a Record tá trazendo uma série de cursos grátis de tecnologia que vão deixar você mais preparado ou preparada para entrar no mercado de trabalho

e para ter acesso a esses cursos e outras oportunidades que a Record Vai disponibilizar durante o andamento desse curso é só você apontar a câmera do seu celular pro pode que tá aparecendo aqui na tela o link também vai estar disponível na descrição desse vídeo Obrigado repúdio pelo Patrocínio e pelo apoio constante em toda essa curso de HTML e CSS em muitos outros projetos do curso em vídeo que estão por vir então Olha só esse aqui já era o exercício antigo para que a gente fez com classe é dito não queremos exercício novo aqui eu

vou fechar tudo como deixar tudo aqui como criar uma pasta nova a gente seguir lá pelo que tá me tirando hein Faz um pouquinho diferente né criar uma pasta nova aqui exercício 020 e botão direito nessa pasta e abrir com o Cold lá a gente vai criar um exercício novo que a gente vai botar aqui seu É sim Ponto HTML já falar sobre pseudo-classes aqui nós vamos criar o código base aquele negócio de sempre vamos fazer aqui botar aqui eu dou classes vou colocar um estilo local a gente poder configurar e o que eu vou

querer fazer aqui é o seguinte era só eu sei que a gente vai falar sobre isso no próximo capítulo da novela Favorita a gente fala sobre mais sobre isso bidv de semana e fica aí como é que configura tamanho curta eu vou dar só uma introdução Zinha só pra gente fazer um exercício básico aqui tem eu posso criar existem vives a gente já chegou a usar the hives aqui anteriormente inclusive no material também uma div ela é um espaço qualquer vou chamar aqui de 01 é que eu vou ter uma outra div que eu vou

chamar de 02 chamaram né tô te pegando dentro de uma div que eu vou colocar dentro 03 Vamos abrir esse arquivo e vamos ver como é que ele vai escrever na tela olha só uma Disney vai ficar um em cada linha perto uma dívida é uma área que vai ficar daqui até aqui no finalzinho ela vai ocupar a tela inteira deixa eu colorir essas divs eu descolori essa dica para você e colorir ela tão toda div vai ter background color Light Grey cinza claro lá tá vendo ela ocupa de ponta a ponta do documento Então

essa dívida que com 01 ela vai daqui até lá embaixo deixa eu colocar um Tex online que vai ser Center para ele ficar no meio tá então eu tenho três dias aqui uma coisa que eu vou fazer é fazer com que essas dívidas fique com um tamanho de 200 por 200 ela vai ficar pequenininha então largura a nota e agora a gente vai ver sem detalhes no próximo capítulo mas a nota Hi é altura vão botar 200 pixels da tela vai ter altura largura é um líder cuidado na hora de digitar o visual Studio code

até que facilita a vida isso aqui é a altura isso aqui é largura cuidado porque altura é com HP e Raid com HP e largura é o Whindersson PH cuidado na hora de anotar principalmente aí então eu fiquei com três espaços de 200 por 200 Deixa eu botar uma borda que nele para você ver também também vai ter uma borda de o Pixel Solid Black isso aqui é um short Hand temos aqui a largura aquela do tipo isso aqui é curta ele vai ficar lá tá vendo Deixa eu ver se eu consigo botar acho que

não tem vertical align Middle não era não funciona porque tá dando a dizer mas enfim se eu tivesse aqui depois a gente ver como é que a gente alinha verticalmente as coisas então tô com três dias aqui com uma em cima da outra se você quiser que fique uma do lado da outra Existem várias formas tá Depois a gente vai ver o Flex a gente vai me entender que é coisa nova das css3 mas eu vou dar um display aqui chamado inline-block inline Block é tudo na mesma linha tá vendo deixa eu dar um diminuindo

aqui ó tá vendo ele vai quebrando aqui existe também o Flex mas aí eu vou ter que fazer umas outras coisas botar um dentro do outro enfim a gente depois aprendi como é que funciona o display Flex vai ter um capítulo sobre isso se organizar as telas aqui que dão uma bagunçada rapidinho então enfim eu tenho aqui as minhas três dias vamos fazer o seguinte eu vou dar aí de para cada uma delas essa aqui vai ser a minha de um essa que você me ajude vi de 2 e essa aqui vai ser minha e

com LED de três aí eu consigo fazer as configurações aqui dentro lembra eu consigo por exemplo fazer com que a dividir com a e de de um tenha Sei lá o background color Blue ó já ficou a primeira com deck Lounge cola no Google consigo fazer essas configurações não vou fazer agora tava uma tem todas as dívidas com a configuração básica e agora a gente vai falar sobre as seu do classe você aprender o que hashtag é um EDC. É uma classe e agora você vai aprender aqui: são uma seu do classe Tais pseudo-classes tem

que estar relacionadas a um elemento ou a uma classe Vou colocar aqui por exemplo a minha div na pseudo-classe tudo classe são relacionadas ao estado de um determinado elemento perto então tem tudo a senhora se ele tá ativo se ele tá marcado tem que tá vazio se ele está habilitado então assim você consegue configurar o estado existe um que é nem tá aqui na verdade que eu vou ver se eu vou tá aqui ó esse aqui é uma pseudo-classe Rover é uma pseudo-classe de vários elementos no casa que eu tô aplicando a o elemento div

que que significa esse Rover significa que quando eu passar o mouse por cima perto quando eu tô com alguma coisa por cima dele então vou mudar aqui ó por exemplo Advil normal ela vai ficar cinza admirou ver ela vai ficar sei lá com de crochê color Yellow certo só isso o que que significa isso vou atualizar ele ficou cinza normal aquele fez a configuração da dif Beleza E cadê o metrô de colorir ela eu não tô com nenhuma div amarela ficando passei o mouse em cima se eu passar o mouse em cima de qualquer uma

aí eu faço uma configuração de estado ele só vai ficar amarelo que essa linha aqui quando eu estiver com o mouse sobre ela aqui é um Rover que é o passando o mouse por cima isso aqui é bem interessante a gente usa bastante só que não significa que ser um link tá eu vou clicar e não vai virar nada é só a coisa do a navegada no site e quando você vai rolando a página que ele vai chegando perto de um elemento Acontece uma animação isso também pode ser feito através do Rover Beleza então a

gente vai ver um pouco mais sobre divs no próximo capítulo a gente vai conseguir entender como organizar o conteúdo numa jeans Como existe um espacinho entre elas aqui tá vendo nessa daqui entrece essa existem no espaço e configurar esse espaço esse 01 tá muito colado aqui em cima como faz para eu gerar um espacinho interno nele também vamos aprender isso tudo no capítulo que vem mas o que a gente fez aqui foi uso do Rover para iluminar uma dívida quando eu passar o mouse por cima tem um efeito muito simples três coisas que todo produtor

de conteúdo sempre pede e comigo não vai ser diferente se você está gostando desse curso ou de qualquer outro curso ou um vídeo do canal do curso em vídeo não se esquece sempre de deixar o seu like deixa também um comentário de incentivo ou até mesmo comentário de dúvida Isso facilita muito o algoritmo do YouTube saber que você tá gostando a crescer mais e mais conteúdos nossos e não se esquece também de se inscrever no canal e agora até o sistema de inscrição mudou um pouquinho na hora que você abrir o Sininho você tem que

dizer que quer receber todas as notificações ajuda aí o canal do curso em vídeo A continuar relevante para galera de tecnologia e a gente continua daqui produzindo o vídeo de qualidade é um outro exemplo que a gente vai criar aqui também foi um exemplo que eu criei lá no material em PDF que é o seguinte a Deixa eu te mostrar aqui eu vou criar um arquivo novo chamado Rover. HTML nesse Rover. HTML eu vou criar a base botar ele dentro de hoover e eu vou fazer o seguinte eu vou querer mandar um aqui exemplo de

roupa e vou criar uma div aqui dentro dessa dizer vou criar um parágrafo Tá eu vou ter um parágrafo de fora também esse parágrafo assim passe o mouse sobre o texto abaixo curtir as paradas aqui por enquanto vou botar aqui passe ou Mouse tá percebe que eu não usei um parágrafo aqui eu usei uma digitar isso aqui foi de e vamos abrir esse arquivo que é o Hover Car para que eu passe o mouse sobre o texto abaixo passa maus aqui esse passe o mouse aqui vai ser o seguinte Olha só vamos criar aqui no

Style e vamos criar um estilo aqui para o Bari font-family um montão de sempre para ficar mais bonitinho passa o mouse aqui vai ser na minha div a minha dizem eu vou fazer um Rover nela para mudar a cor da letra virar resta então quando eu passar o mouse em cima da dividir ele vai ficar ela vai ficar com a cor vermelha tabela o texto ficou vermelho passa nós aqui eu passei ele ficou vermelho Só que eu não quero só que ele fique vermelho eu quero seguinte Olha isso que legal eu vou pegar essa div

você sabe que a gente pode escrever isso dessa maneira que não vai mudar em nada né Ficar exatamente aqui sabe quando eu passar o mouse aqui eu vou criar um outro parágrafo só que dentro da Diva dentro da div tem um parágrafo Tá eu vou botar aqui texto escondido na verdade eu não vou ele não vai aparecer escondido tá vai aparecer aqui em baixo até está escondido ele não tá nada escondido como é que eu escondo o parágrafo que tá dentro da div olha só que maneiro a usar o símbolo tive se você botar esse

símbolo significa o seguinte um parágrafo que está dentro que é filho de uma div ele não vai mexer nesse parágrafo daqui ele só vai mexendo um parágrafo que esteja dentro da div rotativa display eu vou escolher opção não não mostra nada disso é os parágrafos que estejam dentro de div eu não vou querer mexer viu sumiu um parágrafo aqui tá então passei o mouse não teve nada ou até criar um parágrafo aqui fora da div sim do exemplo você vai ver ó carreguei em dezembro não teve nada quer dizer que ele parágrafo que está oculto

Larga esse texto escondido aqui esse desde escondido eu escondi com esse seletor aqui então isso aqui significa que ele é um filho tá odv tem um filho tem um parágrafo que que eu vou fazer com os parágrafos do div eu vou esconder só que quando eu mexer o mouse em cima desse passe o mouse aqui eu quero que o texto escondido apareça como que eu vou fazer isso eu vou fazer assim ó div quando eu passar o tema da Disney o parágrafo que está dentro que que vai acontecer com ele o botar display Block que

é para lhe mostrar quando você vai mostrar ó quando mexe o mouse ele mostra o texto escondido também eu vou fazer o seguinte display Block acordar do do texto acordar da letra vai ser branca e o background-color vai ser vermelho então eu vou pegar o parágrafo ele vai ficar com a letra branca e o texto vermelho só quando eu estiver passando mal sem fim da dívida tá vendo nesse exemplo no outro exemplo mexer só na div mesmo agora eu tô mexendo no um parágrafo que tá dentro da div então aqui ó eu usei a representação

de uma pseudo-classe e aqui eu utilizei uma representação the child de filho tá olha só quando eu passar mal já passa o mouse o texto escondido aparece a gente viu aqui a gente consegue diminuir o tamanho ele essa Divina de consegue botar aqui ó o parágrafo vai ter largura que 300 de fixos por exemplo sacrificar menor linda né então me passa o mouse por cima ele fica vermelho aqui o texto que eu acabei de marcar ficou vermelho porque eu disse a quando eu passar o mouse na div muda a cor para vermelho da letra Só

que quando eu passar o mouse na Disney ele também vai mostrar um parágrafo que tem dentro tá vendo ó então daqui também a gente começa a pensar na criação dos menos sabe quando você passa o mouse em cima de um elemento ele desce no Dropbox ou menos isso aqui é um protótipo Inicial desse raciocínio que a gente vai ter que ter de elementos escondidos e elementos exibidos o senhor display display Block Na verdade eu posso dar display de várias outras maneiras depois a gente vai aprender Beleza então essa aqui também foi outra aplicação do Rover

de uma pseudo-classe e existem outras a gente já viu aqui Não no teu material em PDF tenha numerado vários deles e a gente aprendeu a fazer bastante coisa aqui gostou dessa aula então é isso eu me despeço por aqui e no próximo vídeo mas vamos falar dos seu do elementos também é possível incluir conteúdo que mexer com conteúdo da HTML os E aí CSS Você é bem legal também a gente chama de seu do elemento que só que a gente só vai aprender a fazer isso no próximo vídeo não se esquece prática na sua casa

faz os seus exemplos a nota no seu caderno e não passa para o próximo vídeo enquanto você não aprender usar e de classe e pseudo-classe no próximo vídeo a gente aprende mais uma coisa nova deixou um grande abraço e até a próxima [Música] [Aplausos] E aí E aí [Música]