Seletores CSS básicos (Parte 1) - Curso de HTML e CSS - Aula 15

fala pessoal nessa aula a gente começa então a aprender CSS tá então esse é um curso de html CSS gratuito link da playlist completa tá aí na descrição Mas voltando aqui ao nosso assunto a gente vai começar a aprender CSS então eu vou falar em duas aulas nessa e na próxima aula a gente vai falar sobre o seletores básicos do CSS mas presta bem mas presta bastante atenção nessa palavrinha que eu tô falando aqui básico não quer dizer que não tenha muito conteúdo nessa aula talvez essa aula aqui seja aproveitada até por desenvolvedores experientes já

que já conhecem os seletores CSS porque é um conteúdo super denso você vai ver que talvez por minuto dessa aula você vai aprender uma coisa então se eu tiver sei lá 30 minutos de aula São 30 coisas diferentes eu acho que tem mais coisas modéstia parte nessa aula mas presta bastante atenção nessa aula porque agora a gente começa a aprender o seletores tá como eu te falei são seletores mais básicos porque eu vou separar outras aulas pra gente falar outros seletores Mas como eu te expliquei é um conteúdo bem denso tá o link da playlist

completa do curso completo tá aí na descrição se você quiser voltar para aulas anterior você pode acessar esse link se você tivesse vendo esse vídeo depois que eu já terminei de publicar todas as aulas você vai ver que vão ter mais ou menos 50 aulas se você tiver pegando esse conteúdo junto com o que eu tô postando essa aula eu acho que a aula 15 14 15 não me lembro mas sem mais delongas vamos embora para esse conteúdo aí para a gente já começar a aprender o CSS aqui a gente já viu alguns mas a

gente vai rever eles e ver algumas coisinhas a mais beleza então um dos seletores que eu posso utilizar Vou até apagar isso aqui meu CSS já tá ali em casa aqui então vou escrever aqui nesse SS aqui um dos seletores que eu posso utilizar é o primeiro deles que eu vou te falar é o seletor Allen tudo você seleciona todos os elementos da fazendo isso aqui então se eu colocar por exemplo border um pixel Solid Red todos os elementos da página vão ter a borda aqui no caso Então até pegou alguma borda aqui alguma coisa

deixa eu ver qual que é o elemento e essa borda aqui tá no baria tá vendo aqui ó então todos os elementos da página vão ter uma borda ela tem aqui também um margem aqui mas alguma coisa mas é esse aqui veio por padrão então o que que a gente costuma fazer com esse seletor aqui que é o All né tudo a gente costuma zerar o CSS Será que a gente fala é geralmente Nem sempre eu vou te mostrar um negócio aqui já já a gente coloca margem zero beleza isso quer dizer que eu não

quero que nenhum elemento tenha mais o mar a margem que vem por padrão e o display que vem por padrão gente faz isso porque se a gente não fizer isso em todo o elemento que a gente for escrever a gente vai ter que colocar essas propriedades aqui quase todos pelo menos os que têm alguma propriedade a gente vai ter que zerar isso aqui beleza então a gente já faz isso aqui em todos os elementos para não ter que fazer isso aqui manualmente depois beleza então Esse é um dos seletores que a gente tem o outro

seletor o próximo seletor que a gente já viu também é o de classe né no caso e vamos olhar primeiro de tag que só para a gente já tirar isso do caminho a gente pode se a gente quiser utilizar o seletores de classe então se eu tenho classes aqui por exemplo vou colocar aqui ó um monte de coisa ó uma Dive depois vou colocar uma section depois dentro da section um H1 Pois eu vou colocar um Loren Y aqui e vou colocar um p com Loren y e aí deixa eu voltar aqui no comecinho colocar

ele para quebrar a linha aqui para mim um atalho é altz para dar para quebrar a linha que eu não sei se é o mesmo em todos os sistemas e eu salvando aqui vou dar um zoom aqui na página Beleza então a gente pode selecionar por tag como que eu seleciono por tag por exemplo a maneira mais fácil de eu selecionar por tag é só pegar o nome da tag então se eu quiser eu posso selecionar os parágrafos aqui E esse seletor de tag seleciona todos os parágrafos Inclusive eu vou colocar mais ali para você

ver posso colocar que eles vão ter color Dark Blue por exemplo então a cor aqui do meu parágrafo isso aqui fica difícil de ver deixa eu colocar um red aqui pra gente ver beleza é um acordo meu parágrafo ficou Red né no caso vermelho Mas eu posso também deixa eu colocar mais um só para você ver que isso é aplicado a todos os parágrafos do documento Então vou colocar uns três parágrafos aqui ó você todos eles estão com a cor vermelhinha aqui então é eu posso também fazer seleções mais específicas então por exemplo eu posso

falar que eu quero alguma coisa bem específica assim ó ó presta atenção aqui na hierarquia das tags eu tenho o bar e tem a tem o section tem o H1 e tem o p aqui no caso né Se você prestar atenção aqui A Hierarquia aqui Bari é pai de div que é pai de section que é pai de ascection que é pai de H1 e do P no caso então o H1 eop são irmãos Então isso é importante saber porque a gente também tem seletores de irmãos tá então vou colocar aqui para você ver ó

uma seleção bem específica eu vou pegar o Bari a divi acception e o p então eu posso fazer essa seleção Assim ó deixa eu copiar e colar e aí essa seleção é chamada de seleção de descendente que se eu não me engano e a gente faz assim ó por exemplo eu quero bare beleza peguei o baile se eu quiser essa pegar mais um descendente do Body eu posso pegar a Dive que primeiro que é essa primeira div então aqui eu tô falando toda Dive que está dentro do baile beleza mas eu posso continuar selecionando aqui

ó é section então agora eu já falando diferente acception agora eu já tô falando toda section que está dentro de uma div que está dentro do bari Beleza então na verdade quem que eu tô selecionando aqui é action beleza e aí dentro da sétima eu posso pegar um p assim que tá lá né no caso deixa eu olhar aqui é assim então tô selecionando dessa maneira aqui ó o body a dieselction e o p que tá dentro da section aqui então essa seleção de dependentes aqui no caso ela é feita através de um espaço e

quem é selecionado é o último elemento que a gente colocar aqui beleza então por exemplo se por algum motivo eu tiver algum parágrafo aqui que pode estar por exemplo dentro da dívea mas não tá dentro da section esse parágrafo não é selecionado por exemplo se eu colocar um parágrafo Aqui você vê que ele tá dentro da dívida diretamente não dentro da section então ele aqui no caso não é selecionado vamos dar uma olhada aqui que que ele foi selecionado porque ah por conta dcp aqui ó Então tá vendo ó a gente tem que ficar ligado

com essas coisas aqui o meu p foi selecionado porque eu esqueci uma uma classe aqui então eu vou só comentar aqui comentários no CSS vocês são com dessa maneira aqui que é barra uma estrelinha e para fechar é o invertido aqui você pode comentar no visual Studio code você pode selecionar e dar um control barra para comentar ou desses comentários Beleza então agora sim você tá vendo que o p que tá dentro da Dive não foi selecionado porque a gente utilizou essa seleção de dependentes aqui na section aqui beleza eu posso também se eu quiser

é aplicar mais de uma coisa mais de uma vez então por exemplo Suponha que eu queira também aplicar tudo que tá no H1 aqui ó porque você tá vendo aqui ó que esse H1 ele também tá na mesma na mesma hierarquia aqui do p não se eu quisesse fazer uma outra seleção e aplicar também esse estilo no H1 eu posso utilizar vírgula e selecionar mais uma coisa vou colocar o p vou por uma vírgula E aí por padrão eu gosto de quebrar a linha assim ó para deixar uma regra em cima da outra aqui então

essa é uma seleção de cima aqui e essa de baixo aqui é outra seleção então eu posso também selecionar aqui o H1 junto então você vai ver que a mesma coisa que eu tô aplicando no P Eu também estou aplicando no H1 isso ajuda a gente demais quando a gente está fazendo seleções aqui aplicando coisas em vários elementos beleza para simplificar a vida eu poderia também fazer assim ó deixa eu pegar aqui colocar h1,p beleza e daí você vê que agora isso já foi aplicado aqui no meu pé mas se eu tivesse um H1 aqui

ó fora aqui no caso porque agora eu não tô trabalhando mais quando descendentes aqui no baile por exemplo você vai ver que isso vai também ser aplicado do meu H1 aqui fazendo uma interrupção rapidinha aqui no vídeo só para te falar para você se inscrever no canal se tiver inscrito Confere se tá realmente inscrito mesmo marca aquele Sininho e dá um joinha nesse vídeo isso é super importante para quem cria conteúdo saber que você gosta desse tipo de conteúdo Bora de volta para o vídeo e aí deixa eu voltar aqui e colocar essa cor aqui

purple por exemplo E aí para você ver que essa regra aqui de cima tá sendo aplicada nesses elementos aqui ó e essa outra regra que eu coloquei aqui bem específica ela tá sendo aplicada nos elementos que estão dentro da onde eu fiz a seleção Beleza então na verdade isso aqui é bem simples e isso aqui tudo toda essa vírgula ou essa descendência aqui no caso eu posso usar com ai de e com classes também beleza não aqui a gente tá fazendo com diretamente com as tags Mas eu posso utilizar comidinha com classe A gente já

vai ver isso aqui mas uma coisa que eu quero já te informar é que no visual study code Você pode passar o mouse na onde você está selecionando por exemplo Mouse aqui ó ele já me fala qual que é a tag que eu tô selecionando e qual que é especificidade dessa seleção Então a gente vai estudar em outra aula a especificidade porque vai ser um pouquinho mais complexo mas é aqui também Você consegue ver isso então passando o mouse aqui eu sei que que eu tô selecionando passando o mouse aqui ó ele tá falando ó

qualquer elemento com especificidade eita palavra difícil especificidade zero aqui ó ele já me fala aí hierarquia eu tenho que ter um Bari pode ser ter qualquer coisa dentro do bar mas tem que ter uma dívida pode ter qualquer coisa dentro da dívida tem que ter uma section pode ter qualquer coisa dentro da section E aí sim vem o meu pé Então é isso aqui que eu tô selecionando beleza aqui a mesma coisa só que agora é um H1 Beleza então essa isso aqui ó se você quiser ir anotando aí eu espero que você esteja fazendo

isso essas anotações ou escrevendo e testando para você ver que que tá sendo aplicado é eu vou tirar isso aqui para a gente já fazer outro tipo de seleção então é uma coisa também importante a gente aprendeu a fazer seleções de classe ou colocar atributos de classe dentro do nosso elemento Então vamos pegar esse aqui ó criar aqui por exemplo um H1 E aí sempre que eu criar um elemento e eu quero selecionar ele por CSS a um se eu não tiver fazendo só um reset de CSS é super interessante que eu utilize classes tá

porque é muito é muito melhor você ter classes para você selecionar do que você ficar selecionando tags por exemplo porque pode ser que você aplique uma coisa numa tag E aí toda vez que você for usar ela dentro da página você vai ter sempre aquele mesmo estilo Beleza então é melhor você falar eu quero colocar uma classe aqui falando que isso aqui é um heading beleza e aí vou colocar uma hora Y aqui pra gente ver como a gente seleciona por classe aqui então para eu selecionar por Classe A mesma ideia tá se eu quiser

pegar a classe eu coloquei como que eu coloquei ali foi Reading então se eu quisesse selecionar reding e colocar um color red na minhas na minha rede você vê que isso aqui pega e funciona normalzinho beleza e aí aqui nesse caso quando eu tenho uma classes bem específicas de sessões bem específicas dentro do meu código eu posso inclusive reutilizar isso por exemplo Suponha que eu queira um outro título que não tem nada a ver com esse aqui mas que não tem essa classe você vê que isso aqui não vai ser aplicado naquele título é meio

Óbvio isso mas a gente tem que falar né isso aqui não vai ser aplicado naquele título mas Suponha que eu tenho um p que não tem nada a ver com isso com a história aqui no caso mas eu queira que o p também tenha a cor vermelha lá então posso reutilizar a classe Reading apesar de nesse momento ela ter ficado com o nome estranho porque eu tô falando que é Reading Estou colocando essa classe não p Poderia chamar essa classe aqui de color red por exemplo E aí posso aplicar ela em tudo que eu quiser

color red então quero isso aqui color red isso aqui com color red beleza outra coisa que a gente pode fazer também é colocar uma classe como se fosse uma classe pai né nos elementos que a gente quiser para a gente A partir dessa classe selecionar os elementos que estão dentro dessa classe então por exemplo Suponha que eu tenho aqui uma dívida que seja um Class é nem contente por exemplo Então eu tenho aqui é o conteúdo principal da página um exemplo E aí dentro aqui eu tenho várias coisas eu tenho um parágrafo com Loren Eu

tenho um H2 várias coisas aqui dentro Loren também só pra gente ver E aí você vê que aquela classe ali ó ela tá fazendo somente o papel dela no lugar específico Que eu apliquei Eu não eu não apliquei em outros locais então eu não afeto outros locais da página então é mais interessante eu trabalhar assim mas Suponha que eu quero falar olha é para todo o H2 que tiver dentro dessa desse pai aqui no caso que tem essa classe específica eu quero colocar alguma coisa eu quero já deixar pronto com Itálico eu posso fazer assim

também então eu posso pegar essa classe aqui e aí fala que é para todo o H2 que tá lá dentro Eu quero fonte stylek beleza aí ó você vê que isso aqui é aplicado aqui mas somente nos filhos dessa classe aqui bem container no caso inclusive o CS o BS Coach te mostra para todo elemento que tiver uma classe bem container você tá selecionando esse H2 aqui beleza é e se eu tivesse outra dívida ou se eu não tivesse essa classe aqui ó casa vou duplicar isso aqui só pra gente ver eu vou tirar essa

classe aqui ó você vai ver que isso não é aplicado nesse outro H2 aqui ó mesmo sendo uma dívida tendo a mesma estrutura não tem essa classe aqui eu não não vou conseguir fazer essa seleção Inclusive eu também posso selecionar classe dentro de classe eu vou tirar esse aqui só de exemplo já tá bagunçando aqui minha página vou tirar também essa parte de cima aqui eu também posso fazer isso com classes então por exemplo eu eu fiz com a classe e uma tag eu posso fazer com uma classe e outra classe ou uma classe ou

uma idioma classe essa combinação que pode ser qualquer uma que você quiser tá então eu posso por exemplo colocar aqui ó classe Reading E aí eu quero eu quero falar para todo toda classe reding que tiver dentro de mim container tem a cor vermelha eu posso ver aqui e falar assim ó aliás vou deixar a fonte Itálica aqui só pra gente ver depois é vamos mudar a cor também eu posso fazer assim ó e aí ao invés de usar a tag eu tô falando que é que é eu quero essa classe então se você observar

ó aqui no visual Studio code ele vai falar o elemento tem que ter a classe bem container só que dentro desse elemento que tem a classe média container tem que ter um outro elemento que tem a classe Reading e é esse ele que vai ser selecionado Então posso colocar aqui pra gente ver o color red beleza e aí eu posso continuar fazendo isso se dentro dessa aqui eu tivesse outra coisa eu poderia colocar outra coisa aqui e aí vai sumir aqui porque não é assim que tá a nossa estrutura Mas você vai ver que o

visual Studio fala pra dentro de um elemento que tem a classe bem container Tem que existir um outro elemento que tem a classe reding e aí você vai selecionar o elemento que tiver a classe outra cor beleza é basicamente assim que funciona outra coisa também que a gente pode fazer é ser específico quanto ao elemento que a gente está selecionando então por exemplo Suponha que eu tenha vários headings aqui dentro Eu Tenho H1 um H2 e um H3 aqui todos com a classe Reading Você tá vendo que todos eles estão com a cor vermelha e

a Fonte tálica porque eles têm a classe Red então bateu com isso aqui que a gente fez de seleção seria um elemento que está dentro de container que tem a classe Red Mas eu posso também falar que eu quero especificamente um elemento por exemplo eu posso colocar aqui antes do ponto da classe que eu quero selecionar eu quero especificamente um H2 Então agora eu tô falando aqui ó o seguinte ó o elemento tem que estar dentro de uma classe me container mas tem que ser um H2 que tenha classe Reading não pode ser nenhum outro

elemento então agora só ficou O H2 ou seja estou sendo super específico aqui e uma outra coisa também que eu posso fazer é a mesma coisa aqui na verdade é especificar esse elemento aqui é então posso falar que é esse elemento que tem essa classe aqui e aí se a gente colocar ele aqui ó div ponto nem container contente que tem um descendente que é um H2 que tem a classe Reading beleza E daí se você observar eu continuo selecionando aqui mas se eu mudasse essa dívida para uma section por exemplo já não vai ter

a seleção mais já não vai ocorrer a seleção mais porque esse elemento não é uma dívida que tem também contente que tem um H2 que tem redm aqui beleza então esse aqui é o seletor de descendentes descendente aqui no caso você pode continuar fazendo seleções o tanto que você quiser para ir afundando como a gente fez anteriormente ó aqui ó deixa eu te mostrar para você ver eu posso combinar essas coisas deixa eu voltar aqui para a dívida posso falar que eu quero um elemento que tá dentro do bari que é uma Dive que tem

a classe bem contente que é um H2 que tem a classe Reading então para eu falar isso que eu te falei aqui eu falo somente Bari aqui no caso é bari e aí dentro do bari tem uma Dive que tem a classe bem contente que tem um H2 e que é que tem a classe Red beleza outra coisa também eu posso colocar classe não pare também então posso colocar às vezes eu posso com o Java script colocar uma classe no bar e falando que existe algum erro na página por exemplo Então essa classe aqui do

bário só vai indicar só vai servir aqui na eu posso utilizar ela para eu selecionar alguma coisa mas ela só vai servir para indicar que eu posso fazer alguns elementos dentro da página se comportarem de maneira diferente então por exemplo eu posso falar aqui ó aqui toda vez que no Bari existia uma classe erro aí faz essa seleção mas se com JavaScript eu for lá e remover essa classe error aqui ó fazer isso aqui você vê que a seleção não ocorre mais beleza então só de colocar a classe no Bari eu faço um outro elemento

dentro do bar e se comportar a partir da seleção de CSS que eu fiz aqui beleza é outra coisa também que eu posso fazer com esse descendente aqui é falar o seguinte ó que que é muito similar É esse aqui mas é diferente Imagine que eu queira fazer uma seleção aqui no caso deixa eu eu vou mudar aqui porque já tá ficando grande demais isso aqui então vou voltar aqui vou falar assim ó é Vou colocar aqui uma div só aliás pode ser só o meu pique no caso ó deixa tirar isso aqui tirar esses

parágrafos parágrafos por enquanto e vou deixar só o meu P aqui Imagine que eu queira selecionar esse para Vamos mudar para a dívida que eu acho que vai ser melhor para te explicar deixa eu colocar uma dívida E aí eu vou colocar um uma outra dívida aqui e vou chamar assim ó essa dívida aqui vai ser pai e essa outra dica aqui vai ser filha beleza não tem uma de Ivi que é pai e dentro dessa de pai eu tenho uma Dive filha aqui imagina que eu queira selecionar essa dívida aqui que tem classe por

exemplo de pai então para eu selecionar esse aqui você provavelmente já sabe aí no caso né É só ponto pai e aí no pai eu vou colocar um background eu vou colocar color que vai ficar mais fácil da gente entender então color red então no pai eu tenho color red Mas isso foi aplicado na filha e eu que ocorreu aqui na verdade foi herança tá então se você observar aqui ó deixa eu pegar aqui para você ver se você olhar aqui ó no no console aqui do do Chrome ele Aqui você vê que aqui ó

tem uma tem uma regra aqui que foi aplicada ao seu selecionar o pai por exemplo o pai tem a cor color red aqui no caso Beleza vai ser selecionar a filha você vê que nela aqui só tá pegando aquele estilo que a gente aplicou padrão em todos os elementos não tem mais nada esse aqui ó é o padrão que vem do navegador que é o display Block mas aqui embaixo tem herdado tá em inglês no caso vai ser escrito herdado de divi.pay color red porque porque essa foi a configuração padrão que o navegador colocou para

gente então se a gente observar o que que foi computado aqui na verdade do navegador é a gente não vai conseguir ver isso aqui né Eu achei que ia mostrar que a o que que foi computado mas na verdade não foi computado foi computado a cor ao invés da propriedade Mas o que aconteceu que foi isso aqui ó é toda Dive provavelmente estar assim na configuração padrão do navegador color um Ready beleza isso aqui é o que faz as dívidas herdarem aqui no caso uma cor da outra aqui mas se eu quiser colocar por exemplo

para ter a cor Inicial que tinha sempre você vê que agora a filha não herda mais a cor que veio do pai beleza não só coloquei isso aqui porque às vezes eu vou tentar te explicar um negócio aqui e você não vai conseguir entender porque vai aplicar em todos então aqui eu só apliquei a cor no pai beleza e a divi filha não foi não não herdou essa cor aqui é só que deixa eu colocar uma classe aqui ó filha só que tem uma outra maneira de eu selecionar agora eu vou fazer invertido eu vou

selecionar a filha então para eu selecionar a filha eu posso fazer uma seleção de dependente então pai ponto filha e essa seleção de dependente aqui no caso está vendo aqui que mudou essa seleção de dependente no caso aqui ela é feita a partir de um espaço então eu dou um espaço aqui de um seletor para outro eu faço a seleção independente Mas tem uma outra coisa que eu posso fazer é deixar colado assim ó então se eu deixar o as duas classes coladas Aqui você vê que eu não aplico nenhum em nenhum elemento aqui essa

essa seleção que eu fiz por que que isso ocorreu porque na verdade isso aqui também tem um significado isso aqui significa que é esse elemento que eu tô selecionando tem que ter a classe pai e filha beleza então se observar Eu tenho um elemento que tem que ter duas classes pai e filha pode ter várias outras mas tem que ter especificamente essas duas Então nesse caso essa seleção só iria ocorrer se a filha também tivesse a classe pai beleza aí agora ela é selecionada porque ela tem as duas classes poderia ter outra poderia ter qualquer

coisa aqui mas tem que ter especificamente pai e filha nessas duas isso é a seleção colada aqui se eu separo aí isso já significa outra coisa significa que é uma filha que está dentro o pai beleza e aí ainda seguindo nessa pegada eu tenho seletor de filhos diretos também então por exemplo Deixa eu te mostrar aqui ó aqui eu tenho pai e uma filha essa filha aqui essa classe aqui ela é filha direta dessa classe pai né no caso porque ela tá diretamente dentro mas aqui no caso eu poderia ter uma outra dívida que também

tem a essa essas mesmas classes aqui por exemplo do mesmo jeito e eu vou colocar filha da filha só para você entender então eu tenho uma um pai uma filha e uma filha da filha aqui no caso né E aí que que acontece aqui olha que interessante eu posso falar que eu quero selecionar a filha no caso aqui mas não as filhas da filha entendeu eu posso selecionar diretamente somente o que for filho desse pai aqui então deixa eu duplicar isso aqui só pra gente ter mais de uma pra gente conseguir ver aqui ó então

aqui ó eu tenho eu vou colocar a filha da comum só para não ficar difícil de entender e aí ó aqui eu tenho a gente pode até ver isso hierarquicamente aqui no caso eu posso colocar por exemplo margem E aí nesse margem left por exemplo 10 pixels E aí aquilo ali vai ficar meio que inventado aqui no caso né então vamos colocar mais pode ser uns 20 pixels vai ficar em dentada aqui então é agora eu tenho pai e aí eu consigo ver hierarquia aqui no navegador mesmo eu tenho pai filha um filha da filha

e aí filha dois né no caso que seria E aí eu faço eu quero fazer a seleção dessa dessas filhas aqui ó essas duas filhas aqui beleza e não as filhas delas aqui então como é que eu faço eu venho aqui e falo que eu quero o pai e a filha aqui no caso beleza E daí se a gente observar Ó você vê que pegou em filha da filha aqui né Vamos observar porque eu tenho aquelas paia aqui na na nessas aqui aí eu coloquei pai aqui então eu tenho que tirar aqui esquecer disso E

aí sim essa outra aqui nessa outra aqui também ficou Então vamos tirar aqui beleza agora sim tá vendo que eu tô selecionando a filha Direta do pai utilizando esse seletor que é o sinal de maior que a equipe beleza isso aqui não faz diferença tá colado tá pode estar colado ou pode estar separado tanto faz mas para ficar mais fácil de ler aí eu deixo separado Se eu mandar ele formatar o meu CS Ele cola de novo aqui tá vendo então tanto faz na verdade o jeito que você utilizar Então esse seletor aqui ele chama

child selector beleza esse sinal de maior aqui aqui ele fala que tem que ser deixa eu ver se houvesse Gold mostra aqui ó tem que ser uma um filho desse elemento que tá dentro desse elemento aqui diretamente você vê que não tem aqueles três pontinhos né que a gente tinha anteriormente ó aqui a gente tem uns três pontinhos falando que pode ter qualquer coisa aqui né aqui não aqui tá falando ó tem que ser um filho direto desse pai aqui beleza Esse é o seletor de filho e eu poderia continuar selecionando por exemplo se eu

quero que selecionar pai no caso eu quero selecionar na verdade a filha da filha aqui mas para eu selecionar isso eu quero fazer uma hierarquia grande eu posso falar que eu quero um pai que tem uma filha que aí essa filha tem outra filha Então nesse caso eu vou selecionar somente a filha da filha para eu fazer isso eu faço ponto filha beleza que que eu tô dizendo com isso eu quero um pai que tem diretamente no pai uma filha que tem diretamente na filha outra filha beleza isso vai não vai funcionar se eu tiver

alguma coisa no meio do caminho então por exemplo se em algum lugar Suponha que aqui filha da filha eu tenha um spam que seja aqui ó no meio do caminho você vê que essa filha aqui ó que eu coloquei em volta do spam já não é mais filha direta dessa filha quem é filha direta dessa filha que é o spam E aí a do spam é essa dívida aqui que eu tava selecionando antes agora passou a ser filha do spam então e só ia funcionar se eu colocasse aqui no meio do caminho Por exemplo agora

eu tô selecionando essa né E aí eu quero essa e agora só ia selecionar se eu colocasse um spam no meio do caminho aí eu só seleciono essa que a que tem o spam entendeu então eu posso ser super específico no meu CSS Como eu posso ser também entre aspas desleixado e eu gosto sempre de deixar as possibilidades um pouco mais abertas dependendo do caso você isso aí vai ser depender de casa casa mas eu geralmente quando eu vou selecionar se não for uma coisa muito específica Geralmente eu vou fazer essa seleção Assim a não

ser que eu quero uma coisa bem específica assim mas nesse caso aqui ó toda a filha que tiver dentro do pai quer dizer que eu vou selecionar toda essa hierarquia aqui porque todas elas têm a classe filha então vai ser todas foi salvar salva ele navegador não vai ser todas essas filha aqui esse é o seletor de descendente aqui 28 outros seletores aqui eu tô achando que eu vou deixar um por é vamos falar na próxima aula que já tem muita coisa aqui não na próxima aula a gente fala mais um pouco de outros seletores

tava editando essa aula aqui agora e eu percebi que o conteúdo é mais denso do que eu te falei no começo da aula é super denso Se você precisar de assistir mais de uma vez volta e assiste mais de uma vez como eu te falei esse vídeo vai ser dividido em duas partes então na próxima parte a gente continua falando dos seletores básicos do CSS como eu expliquei para você então até a próxima aula