[MT - Front-End] 3.3 Dominando os seletores no CSS

nessa aula nós vamos aprender mais sobre seletores e a gente vai ver esse conceito na prática Então já prepara para deixar o vs code aberto aí [Música] beleza mas antes da gente começar a praticar vamos relembrar um pouco o que é um seletor em CSS um seletor é basicamente uma maneira da gente escolher Quais elementos da página vão ser ser estilizados a gente pode imaginar o seletor como um tipo de filtro que seleciona determinados elementos Com base no nome na classe no ID ou outras características eu vou te dar um exemplo prático Se você quiser

mudar a cor de todos os parágrafos na sua página para Azul você usaria o seletor P que representa os elementos de parágrafo e aplicaria a ele uma regra de cor Então os seletores nos ajudam a aplicar estilos específicos a diferentes partes da nossa página sem a gente precisar alterar o HTML diretamente e falando em seletores os seletores mais utilizados Então já fica ligado aí porque você vai utilizar bastante eles são seletor por tag que seleciona todos os elementos correspondentes à tag fornecida inclusive no exemplo que eu falei anteriormente sobre o parágrafo Era exatamente esse seletor

que a gente tava utilizando um outro seletor também muito utiliz é o seletor por ID ele seleciona os elementos baseados no valor do atributo id e para que ele funcione corretamente Deve existir apenas um elemento com o mesmo ID em uma página Web um outro seletor também muito comum é o seletor por classes que seleciona elementos baseado no valor do atributo Class e por fim nós também temos o seletor Universal que nós usamos para aplicar uma regra de estilo para todos os elementos da nossa página eu sei que parece até bastante coisa mas fica tranquilo

que a gente vai ver um exemplo de cada um deles nesse código aqui então vem comigo na aula anterior a gente fez alguns exemplos aqui de utilização do CSS e de integração dele com HTML então eu vou reaproveitar os mesmos arquivos que a gente utilizou na aula passada pra gente continuar os exemplos dessa aula Tá bem então a primeira coisa que a gente vai fazer aqui é acessar o nosso arquivo CSS e a gente vai utilizar o seletor Universal a gente basicamente vai definir uma fonte que todos os textos aí na nossa página Web deverão

ter então para isso a gente vai usar o seletor Universal porque ele é exatamente aquele seletor que vai poder modificar um atributo ou mais de todos os elementos da nossa página então para isso a gente vai utilizar aqui como seletor o asterístico então quando a gente quer atribuir uma regra ou mais de uma regra a todos os elementos de uma página a gente vai utilizar o seletor Universal que é representado pelo asterisco vou abrir e vou fechar Chaves você já aprendeu como que funciona essa estrutura de aplicação de regras no CSS né o que tá

dentro das chaves aqui são as regras que a gente vai colocar e agora a gente vai alterar a propriedade relacionada à fonte E aí essa propriedade relacionada à fonte é a propriedade chamada fonte Family que é família da fonte e aí a gente vai colocar aqui você percebe que o visual Studio code ele tá autoc completando para mim né ele tá colocando já algumas opções você pode utilizar esse recurso também eu vou colocar aqui essa fonte Areial elética sem serif Vou salvar o nosso arquivo pronto A partir de agora todos os textos da nossa página

eles terão por padrão essa fonte aqui uma coisa muito importante de eu citar aqui é que esse seletor por ele ser o seletor universal ele vai modificar os atributos dos elementos ou melhor ele vai modificar o o atributo de todos os elementos da nossa página então todos os elementos da nossa página vão ter essa fonte exceto em uma situação que é a seguinte você tá vendo esse seletor aqui que já tava do nosso exemplo anterior que é o seletor de parágrafo a gente só modificou um atributo dele que foi o a cor né O color

agora se eu modificasse a fonte do parágrafo se eu fizesse dessa maneira aqui e colocasse uma outra fonte eu vou apagar eu poder pegar uma outra fonte aqui então eu vou colocar essa fonte aqui corre o que que acontecer aqui quando a gente executasse esse código para todos os elementos da nossa página a família da fonte o tipo da fonte seria Arial helvética sem serifa exceto para os elementos do tipo parágrafo porque para o parágrafo a gente especificou uma outra fonte então um ponto muito importante sobre o seletor Universal é que ele vai atribuir uma

regra para os elementos que não tiverem uma regra definida para a atributo então fonte Family é um atributo ao qual a gente definiu aqui a gente declarou um valor para todos os elementos nossa página só que se tiver um elemento que a gente declarou uma outra fonte para ele é esse valor aqui que vai prevalecer um outro seletor que a gente já tinha utilizado na aula anterior é o seletor de tag então aqui a gente já tem nesse CSS um exemplo aqui a gente selecion a tag P que é a tag de parágrafo e aqui

a gente pode atribuir as regras que a gente quiser tudo que a gente colocar aqui vai modificar a aparência de todos os elementos do tipo P na nossa página mas por exemplo a gente tem aqui um elemento que é muito comum e em HTML e a gente vai falar ainda um pouco mais sobre ele mais adiante a gente vai ter alguns exemplos em outras aulas que a gente vai utilizar esse elemento que é a div então div que é muito comum né no HTML a gente també também pode aplicar regras para ela e a div

é um seletor do tipo tag então assim como eu fiz pro parágrafo eu posso aplicar qualquer regra aqui pra minha div então por exemplo eu posso dizer que a altura de todas as divs vai ser 200 pixels eu posso dizer também que a cor do texto vai ser preto então perceba aqui que eu posso pegar qualquer tag do HTML qualquer tag válida e transformar ela em um seletor então a expressão que a gente utiliza para definir uma tag eu vou dar um outro exemplo aqui eu vou aqui no arquivo HTML para mostrar para vocês perceba

aqui que por exemplo a gente tem um parágrafo mas a gente poderia ter por exemplo uma outra tag HTML que é a tag de link que é a tag a colocar aqui o link a gente pode usar aqui o cerquilha né a gente pode usar essa expressão pra gente colocar um link que ele basicamente ele não vai executar nenhuma ação quando a gente clicar nesse link ele vai fazer nada é para isso que serve esse símbolo aqui propriedade hrf é a propriedade onde a gente coloca é o o link num uma tag do tipo link

e essa tag do tipo link ela é representada pela letra A então se a gente chegar aqui e fizer assim a abrir e fechar as nossas Chaves e a gente colocar aqui por exemplo color e a gente colocar head a gente tá dizendo que todos os links da nossa página tem que ter a cor vermelha então perceba que o do tipo tag basicamente funciona a gente pegando a expressão que simboliza aquela tag pode ser uma letra ou pode ser uma expressão maior por exemplo div são três letras parágrafo é uma só e a também é

uma só a gente vai pegar essa expressão que representa a tag abrir e fechar Chaves e colocar as regras que a gente quer lá dentro então é assim que a gente utiliza o seletor de tag agora um outro seletor que eu citei também para você foi o seletor de ID o seletor de ID para que ele funcione a gente tem que ter na página algum elemento que a gente definiu um ID então para isso eu vou volar aqui no nosso HTML e dessa vez eu vou fazer o seguinte eu vou pegar um desses parágrafos aqui

e vou adicionar um ID nele vou fazer assim colocar um ID aqui parágrafo um pronto A partir de agora esse parágrafo aqui embora ele seja um parágrafo tanto quanto o parágrafo de baixo Mas agora ele tem um ID chamado parágrafo um Lembrando que a expressão ID vem de identificador então basicamente o ID ele é o identificador daquele elemento e a gente tem liberdade para definir o identificador que a gente quiser nesse caso eu criei o identificador parágrafo um para esse parágrafo aqui em específico agora que eu fiz isso a gente vai aqui no estilo e

a forma como a gente vai selecionar o ID é exatamente usando o ID que nem como a gente fez com seletor então simplesmente eu vou poder colocar aqui parágrafo um abrir e fechar as chaves e colocar minhas regras só tem um porém como isso aqui é um ID a gente vai ter que colocar um cerquilha antes dessa forma aqui que você tá vendo né o famoso jogo da velha então agora o meu CSS entendeu que parágrafo um ele é na verdade um ID beleza aí agora eu posso colocar a regra que eu quiser aqui que

que a gente inclusive vai fazer aqui a gente vai colocar a aqui a gente vai utilizar a propriedade fonte wiit aqui basicamente a propriedade que eu posso usar para deixar uma fonte em Então vou colocar aqui o valor bold E com isso a minha fonte vai ficar em então agora o parágrafo um ele além de ter a cor azul e essa família de fonte por quê Porque ele é um parágrafo então ele vai usar essas regras aqui do seletor de parágrafo mas o parágrafo um especificamente além daquelas regras ele também vai tá em então agora

abrindo aqui a nossa página você consegue ver que ó o nosso parágrafo um ficou em e o nosso parágrafo dois aqui não tá em porque embora ambos tenham pegado a cor azul tenha ficado com a mesma fonte mas o parágrafo um a gente definiu um ID para ele e a gente modificou as regras de CSS a partir desse ID dele então por isso que a gente tá tendo esse comportamento que você tá vendo aqui na tela a agora um outro seletor muito comum que a gente tem também é o seletor de classes ele tem um

comportamento parecido com o seletor de ID Mas ele tem uma pequena diferença que na verdade vai fazer toda a diferença Lembra que eu falei que cada elemento HTML deveria possuir preferencialmente um identificador único só que isso não é obrigatório Ou seja você consegue criar vários elementos e atribuir o mesmo ID porém se você fizer isso no seu código vai ficar muito confuso porque não vai fazer sentido vários elementos terem o mesmo identificador inclusive quando você for trabalhar com testes automatizados em desenvolvimento web você vai ver o quanto tem identificadores únicos é extremamente importante só que

assim o que que no final das contas isso tem a ver com o seletores de classe que é o que eu vou te mostrar agora olha se por um lado não é recomendável que vários elementos possuam o mesmo ID é extremamente recomendável que eles possuam a mesma classe Quando você quiser que elementos diferentes tenham aparências semelhantes ou seja o seletor de classe tem a função de definir a aparência semelhante para elementos diferentes mas que possuam a mesma classe eu vou te mostrar isso na prática Olha só isso aqui a gente tinha criado esse link aqui

também aqui embaixo eu vou colocar até um texto agora nele vou escrever só a palavra link e olha só você concorda comigo que o parágrafo né que é representado pela tag P ele é um elemento e o link que é representado pela tag a ele é um outro elemento ou seja eles são elementos diferentes eles têm comportamentos diferentes atributos diferentes alguns atributos são iguais mas outros são diferentes porque afinal eles são elementos diferentes no meu HTML agora deixa fazer uma pergunta se eu quisesse atribuir alguma regra que funcionasse tanto pro parágrafo quanto pro link como

por exemplo eu quero deixar em ambos tanto parágrafo quanto link como que eu poderia fazer isso uma forma que a gente poderia fazer mas que não estaria correta era por exemplo definir aqui o mesmo ID do parágrafo um nosso linkos só que Veja bem se a gente faz isso como eu tinha falado anteriormente a gente tá criando dois elementos com o mesmo ID isso pode gerar uma série de problemas mais adiante então isso não é a forma correta de fazer então eu vou apagar isso aqui e a gente na verdade vai utilizar o seletor de

classe como que ele funciona bom primeiro a gente vai criar uma classe A gente vai ter que definir o nome para ela e a gente vai colocar ela nos elementos então eu vou chamar aqui a classe de que eu quero deixar em agora eu vou copiar esse mesmo código aqui e vou colocar aqui no link também Então veja que ambos ficaram com a classe como a gente tinha formatado o parágrafo um para ficar em se a gente vai atribuir a classe para ele agora e a classe vai ter a finalidade de deixar esse parágrafo então

eu posso tirar isso daqui eu posso poss tirar esse Ed dele daqui ou na verdade eu também posso simplesmente posso deixar esse Ed aí que não vai fazer muita diferença se eu for lá no CSS e tirar essa regra dele então é exatamente o que a gente vai fazer a gente vai lá no CSS e eu vou tirar essa regra aqui do parágrafo 1 pronto eliminei só que olha só nosso código ainda não tá completo A gente criou uma classe aqui pro parágrafo e para esse link e chamou ela de Mas a gente não criou

a regra de CSS para ela como que a gente faz isso eu vou pegar aqui a palavra é bem parecida como a gente fez com o ID tá a gente vai colocar aqui abrir e fechar Chaves só que tá vendo aqui que o visual Studio cod tá dizendo que está errado porque semelhante ao ID a gente também tem que colocar alguma coisa antes para indicar que S uma classe e esse alguma coisa que a gente coloca antes é um ponto então dessa forma aqui agora o CSS sabe que isso aqui que a gente tá colocando

é uma classe aí agora a gente vai poder por exemplo colocar aqui o nosso fonte weight para bold Pronto agora dessa forma nosso Font Wade aqui é bold né que é e agora esses dois elementos aqui estão em negritos a gente vai poder checar isso agora na nossa página Então vamos abrir a nossa página aqui pronto olha só o que aconteceu agora esse texto aqui está em e o nosso link também está em e perceba eles são elementos HTML diferentes mas utilizando o conceito de Classe A gente conseguiu aplicar uma mesma regra para elementos diferentes

se a gente chegar agora aqui no nosso código por exemplo e tirar a Class do nosso parágrafo Vou salvar dessa forma olha só o que vai acontecer o nosso parágrafo agora não está mais então utilizando o Classe A gente consegue aplicar regras de CSS para elementos diferentes aí eu não sei de repente você pode estar se perguntando aí a gente não poderia fazer tudo isso usando letor de tag Sim a gente poderia Mas se a gente fizesse isso a gente só poderia alterar a aparência dos elementos que tivessem a mesma tag pra gente chegar nesse

efeito de alterar o estilo da fonte para colocar como B tanto no parágrafo quanto no link a gente teria que criar uma regra para parágrafo e uma regra para link então quando a gente utiliza o classer reforçando o que a gente explicou anteriormente é uma forma da gente aplicar as mesmas regras de CSS a elementos diferentes elementos que possuem tags diferentes basicamente Essa é a principal diferença então se você fosse utilizar tag ia funcionar só que você teria que criar uma regra para cada tag que você quisesse nesse caso seriam duas regras uma regra para

p e uma regra para a uma regra pro seletor p e uma regra pro seletor a utilizando o conceito de classe dessa forma que você viu aqui a gente consegue aplicar uma mesma regra a elementos que são diferentes existem outros tipos de seletores que nós chamamos de seletores avançados que também podem ser utilizados nós temos o seletor irmão adjacente representado pelo símbolo mais esse seletor é usado pra gente aplicar estilos a um elemento que é imediatamente seguido por outro elemento específico por exemplo quando a gente coloca H2 + IP a gente tá aplicando o estilo

do parágrafo P que vem logo após qualquer subtítulo H2 um outro é o seletor Geral de irmãos representado pelo símbolo de tio ele é semelhante ao seletor irmão adjacente só que ele é menos restritivo basicamente ele seleciona todos os elementos irmãos que seguem um elemento específico não apenas o próximo imediatamente por exemplo H2 TP é um código que selecionaria todos os parágrafos que seguem um H2 E isso não vai importar a distância entre eles dentro de um mesmo contêiner nós temos temos também o seletor de filhos representado pelo sinal de maior esse seletor é usado

pra gente aplicar estilo os elementos que são filhos diretos de outro elemento por exemplo um código ul maior li vai selecionar todos os itens de lista li que são filhos direto de uma lista não ordenada representada pela tag ul um outro seletor avançado é o seletor de descendentes representado pelo espaço esse seletor é mais abrangente até do que o seletor de filhos porque ele seleciona todos os elementos que descendem de um determinado elemento Independente de quantos níveis abaixo eles estejam por exemplo se a gente escrever o código div espaço spam isso vai aplicar estilo a

todos os elementos de spam que estejam dentro de uma div mesmo que tenham outros elementos entre eles são muitas opções né mas agora a gente vai codificar ainda mais para você dominar os seletores Então bora pra minha tela codificar mais exemplos de sín taxe de como utilizar cada uma das opções de seletores vem comigo então com o nosso visual Studio code aberto a gente vai testar cada um daqueles seletores que a gente acabou de ver então o primeiro seletor que a gente vai testar é o seletor irmão adjacente então vamos relembrar como funciona o seletor

irmão adjacente ele vai aplicar uma regra de estilo ao elemento que for diretamente né o elemento que tiver logo ao lado dele ou seja aquele irmão bem do lado mesmo né O que já tiver um pouco depois já não vai ser irmão adjacente tá Então como que a gente vai fazer isso olha pro código que a gente tem aqui a gente tem aqui dois parágrafos e a gente tem um link né que a gente tinha criado anteriormente Você concorda comigo que depois desse parágrafo aqui o o onde tá escrito o texto do parágrafo do Eu

tenho um elemento de link o a e ele tá logo depois do P esse elemento aqui de link a como ele tá logo depois do p a gente diz que ele é o irmão adjacente desse elemento aqui então ele é o irmão é adjacente do elemento aqui p Então se a gente quiser dizer que todo link que vier logo depois de um elemento de parágrafo deve possuir alguma característica específica a gente vai representar isso no CSS usando esse seletor de irmão adjacente da seguinte forma vamos primeiro definir o que que a gente quer fazer aqui

vamos tirar esse classe aqui de do link eu vou também aproveitar já para tirar esse ID se a gente precisar depois a gente coloca novamente e Vamos definir o seguinte vamos colocar que a gente quer deixar o link em negreto mas somente o link que foi irmão adjacente de um parágrafo como que a gente vai poder fazer isso usando seletor avançado a gente vai aqui no nosso CSS Eu Vou até apagar esse que tava aqui e a gente vai fazer o seguinte a gente vai pegar a tag P usar o símbolo de mais e colocar

a tag a vai abrir e fechar Chaves esse código tá dizendo básicamente olha todo o elemento de link que vier logo em seguida depois de um elemento P do ladinho ali a gente vai aplicar as seguintes regras e aí a gente vai colocar a regra que a gente quiser nesse caso a gente vai colocar só a regra aqui do Font weight que é para colocar a gente colocar aqui a parte de né a gente deixar a fonte em então Acabei de fazer isso aqui então o comportamento que a gente vai esperar aqui a gente vai

já fazer um teste é que esse link esteja em porque ele é irmão jacente né dessa tag P aqui agora então vamos ver abrir o nosso site e ver como se ficou na prática então com o nosso site aberto perceba agora aqui que o nosso link tá em Então vamos voltar ali pro nosso código vamos fazer o seguinte agora além do a gente pode colocar aqui também uma cor que a gente vai dizer que a gente quer cor azul e aí a gente pode apagar por exemplo isso aqui apagar essa regra que a gente tinha

definida pro ar e vamos testar de novo vamos ver como ficou agora pronto olha só o link agora tá Azul vamos voltar lá deixar ele de vermelho link agora tá vermelho Então essa é a forma que a gente tem de utilizar o seletor irmão adjacente que é o elemento que vem logo depois de um determinado elemento nesse caso é todo a todo o link que vier logo depois de um p o CSS vai aplicar essas regras aqui agora a gente vai ver um outro seletor que é o seletor irmão a gente acabou de ver o

seletor irmão adjacente o seletor irmão é parecido só que o que que acontece ele é menos restritivo o que que isso significa o seletor irmão adjacente ele só aplica a regra no elemento que vier logo depois daquele elemento ali que a gente tá indicando no nosso código nesse caso elemento parágrafo você dier olha todo o elemento de link que vier depois de parágrafo você vai fazer isso era basicamente isso que a gente estava fazendo o seletor irmão ele vai definir o seguinte ele vai dizer todos os elementos que vierem depois desse elemento eles vão receber

aquela regra Então se tivesse outro link depois desse parágrafo ele também iria receber essa regra no caso do seletor de irmão no seletor adjacente não então vamos fazer esse teste aqui vamos criar aqui mais um outro link vamos deixar ele bem aqui ok E aí agora a gente vai abrir nosso site e ver como que tá isso aqui olha só aqui que interessante o primeiro link tá vermelho como a gente feito o segundo link não tá vermelho por que que ele não recebeu essa propriedade porque o irmão adjacente desse parágrafo é esse link que vem

logo na sequência como que a gente faria para que qualquer link que venha depois do parágrafo ele passe a ter aqui a cor vermelha aquilo tudo que a gente definiu a gente vai utilizar o seletor avançado irmão e a gente vai fazer isso da seguinte forma a gente vai aqui no nosso CSS se o seletor irmão adjacente é representado pelo sinal de maxo o irmão é representado pelo sinal de tio a gente pode colocar aqui um sinal de tio dessa maneira quando a gente fizer isso o que a gente tá dizendo pro CSS é todos

os elementos de link que tiverem depois de um elemento de parágrafo eles devem possuir essas características vamos ver como é que ficou isso no nosso site Olha só agora ambos os links aqui estão em vermelho então a gente acabou de utilizar a aplicação aqui do seletor de irmão agora um outro seletor avançado que a gente comentou também é o seletor filho que acontece no HTML a gente pode ter elementos que fiquem dentro de outros elementos então por exemplo eu poderia criar aqui um link eu vou até copiar esse link que ficasse dentro do meu parágrafo

dessa maneira aqui poderia fazer isso nesse caso o elemento de link este aqui em específico ele é filho do parágrafo ele tá dentro né da minha tag de parágrafo então ele é filho dessa tag aqui essa tag link é filha dessa tag parágrafo E aí se eu quisesse eu poderia aplicar regras específicas aos links que sejam filhos de um parágrafo a forma da gente fazer isso seria assim eu vou copiar esse código aqui porque ele vai ficar bem parecido só que ao invés de ser o tio agora é o sinal de maior dessa maneira aqui

agora eu tô dizendo todos os links que forem filhos do elemento parágrafo Ou seja que estiverem dentro de um parágrafo eles vão ter o comportamento que eu defini aqui e aí eu vou tirar aqui o vermelho eu vou colocar azul só pra gente ver a diferença então agora a gente vai abrir a nossa página e vamos ver como ficou digitou cort também vem direto para cá Olha só como ficou agora nós temos aqui um link dentro do parágrafo que possui a cor azul então a gente acabou de aplicar agora também um seletor avançado filho agora

a gente tem um outro seletor avançado chamado seletor descendente que acontece se a gente parar para pensar aí em genealogia um filho ele é descendente do pai beleza mas um filho falando da palavra descendência ele também é descendente do avô do bisavô do tataravô enfim quando a gente fala de descendência a gente não tá falando só de uma relação Pai Filho mãe filho não a a gente está falando de uma relação que pode se estender muito mais Então olha só quando a gente fez isso aqui no nosso HTML a gente colocou o link dentro do

parágrafo a gente consegue entender aqui que o link ele é filho do parágrafo por quê Porque ele tá exatamente dentro do parágrafo aqui mas olha só se a gente criasse um outro elemento aqui um spam por exemplo ou ou melhor eu vou tirar esse span daqui eu vou usar uma div eu vou criar uma div bem aqui certo e eu vou colocar agora todo o nosso parágrafo dentro da div olha só o que acontece aqui Você concorda comigo que o link aqui esse aqui ele é filho do parágrafo porque ele tá dentro do parágrafo beleza

mas o que que ele é pra div porque olha só ele tá dentro da div é ele tá só que antes de estar dentro da div ele primeiro está dentro do parágrafo Então se a gente fosse meio que fazer uma analogia aqui é como se o parágrafo fosse pai do link e a div fosse o avô aqui do link ou a avó então perceba que nesse caso o a ele não é filho da div mas ele é descendente dessa div E se a gente quiser fazer com que todos os links que sejam descendentes de uma

div eles possuam alguma característica a gente pode fazer isso usando o seletor a gente pode fazer isso utilizando o seletor descendente da seguinte forma se aqui a gente colocou o sinal de maior para representar o seletor filho para representar o seletor descendente a gente vai utilizar somente espaço então agora a gente pode colocar aqui ó div espaço a dessa maneira e a gente pode dizer que todos os links que tiverem dentro de uma div eles têm por exemplo eu vou colocar a cor rosa agora aqui pronto vamos ver aqui vamos deixa colocar uma cor outra

cor aqui pra gente ver mais forte colocar um amarelo aqui e eu vou apagar essa regra aqui para que elas não gerem nenhum conflito eu vou deixar só essa Pronto agora olha só o que aconteceu a gente quer que esse link aqui Fique com a cor amarela e a gente tá dizendo olha todo link que for descendente da div tem que ter a cor amarela foi isso que a gente disz com esse código agora vamos ver se isso aqui vai funcionar realmente opa olha o que aconteceu agora o nosso link aqui que tá dentro da

nossa div ele ficou Amarelo então a gente acabou de utilizar o seletor descendente nesse exemplo prático você acabou de aprender como usar os principais seletores do CSS para estilizar as suas páginas web Mas para te ajudar a reforçar ainda mais o entendimento dessa aula olha essa tabela aqui comigo observa nessa tabela a gente tem alguns seletores o que que esse seletor seleciona e um exemplo prático aí pra gente fixar então o primeiro seletor a gente tem o seletor de elemento que às vezes ele é chamado de tag ou seletor de Tipo o que que ele

seleciona ele seleciona todos os elementos HTML de determinado tipo um exemplo é o nosso querido parágrafo que a gente tem utilizado bastante então aqui a letra P que é a tag de parágrafo ela seleciona um parágrafo o outro seletor é o seletor de ID que que ele seleciona ele seleciona o elemento na página com o ID especificado em uma determinada página h o que que ele seleciona ele seleciona o elemento da página com o ID especificado em uma determinada página HTML é uma boa prática a gente utilizar um elemento por ID Claro um ID por

elemento mesmo que seja permitido utilizar o mesmo ID para vários elementos um exemplo de aplicação nós temos ali o ID my ID que seleciona um parágrafo que tem o ID my ID ou então por exemplo um nink que tivesse também esse mesmo ID o outro seletor é o seletor de classe que seleciona os elementos na página com a classe especificada e nesse caso diferente do id várias instâncias de classe podem aparecer em uma página no exemplo aqui do lado nós temos a Class my class ela seleciona por exemplo todos os elementos de parágrafo que tiverem

a Class my class ou todos os elementos de link que tiverem a Class my class o outro seletor é o seletor de atributos ele seleciona os elementos na página com um atributo especificado por exemplo a tag de imagem ela possui vários atributos um deles é o src ou chamado de sorce se a gente utilizar esse seletor ele vai selecionar o sorce de qualquer imagem mas não vai modificar coisas no elemento imagem apenas no atributo src ou sorce e por fim nós também temos o seletor de pseudo classe ele basicamente seleciona os elementos especificados mas somente

quando estiver no estado especificado por exemplo ele vai selecionar o elemento somente quando o mouse passar sobre ele um exemplo prático que nós temos isso é a tag a ou seletor a se nós colocarmos dois pontos e depois a expressão w ele vai selecionar o elemento a mas somente quando o mouse estiver em cima do link agora que você já sabe como conectar estilos com HTML criar as suas primeiras regras e utilizar seletores a dica de ouro que eu quero deixar para você é a seguinte Maximize a reutilização de códigos com os seletores de classes

em CSS É isso mesmo busque organizar o seu CSS para reutilizar as classes em elementos da sua página imagina um site como se fosse um quebra-cabeça cada peça tem a sua própria forma e lugar mas algumas cores podem se repetir em várias peças no mundo do CSS o seletores de classe são como as cores do seu quebra-cabeça você pode aplicá-los em diferentes peças que são os elementos do nosso HTML para garantir que elas compartilhem o mesmo estilo como por exemplo cor tamanho de fonte e muito mais Isso vai tornar o seu design consistente e o

código muito mais organizado vejamos um exemplo suponhamos que o seu site tenha vários botões para cancelar enviar formulário e várias outras coisas embora cada botão Faça algo diferente você pode fazer com que todos eles tenham a mesma aparência e para isso você pode utilizar a classe você pode por exemplo definir uma classe botão padrão e reutilizar ela em todo os seus botões da sua página entendeu E não se esqueça deixe a programação web com o seu estilo CSS é uma chave para estilizar Então bora estilizar e eu já vou aproveitar esse momento para deixar uma

frase muito importante para você ela é do Brad Frost um renomado consultor de design e ele disse o seguinte o design FR Change é mais do que apenas deixar um site bonito trata--se na verdade de criar uma experiência que seja intuitiva e agradável pros usuários e olha com essa o Brad falou tudo e agora eu vou deixar nas suas mãos chegou a hora de você colocar a mão na massa e praticar tudo que aprendeu aqui nesse desafio você vai fazer o seguinte primeiro você vai aplicar cor e modificar a fonte de um parágrafo para isso

você vai criar um arquivo HTML e adicionar um parágrafo de texto simples depois você vai criar um arquivo CSS e vincular ele ao seu arquivo HTML depois disso utilize o seletor de tag para selecionar o parágrafo e altere a cor do texto para azul e mude a fonte para Arial tudo isso bem semelhante como a gente fez nessa aula então se você precisar fica à vontade para voltar ao vídeo e rever alguma coisa que a gente fez depois de fazer isso você vai diferenciar os estilos de elementos usando classes e ids faça o seguinte passo

a passo adicione mais dois parágrafos ao seu arquivo HTML atribua uma classe A um parágrafo e um ID ao outro no arquivo CSS crie regras específicas para a classe e para o ID alterando o a cor do texto e o tamanho da fonte para cada um então tá com você codifica agora por aí que eu te vejo daqui a pouco e aí como é que foi colocar a mão na massa conseguiu fazer o que precisava Espero que sim caso você queira ver como eu resolvi esse mão na massa Vou deixar um QR Code aqui quando

você escanear você vai ter acesso ao material complementar dessa aula para conferir o meu meu código beleza nessa aula você aprendeu a fazer ainda mais códigos em CSS e especificamente aprendendo a utilizar seletores eu tô encerrando essa aula por aqui mas eu já tô ansioso para te ver na próxima então já clica para avançar pra próxima que eu tô te esperando lá