Seletores CSS básicos (Parte 2) - Curso de HTML e CSS - Aula 16

fala pessoal continuando aqui com os nossos seletores de CSS eu vou começar esse aqui de novo só para ficar mais mais simples da gente entender aliás eu vou deixar essa margem aqui aliás é novo não vou usar essas essas tags aqui então a gente ainda tem mais seletores pra gente ver é outros seletores que eu queria te falar são seletores de irmãos Lembra que eu te falei que a gente tinha seletores para irmãos né Então imagina aqui comigo eu tô no Bari vamos até colocar uma dívida aqui com uma classe para ficar mais real o

exemplo dentro dessa dívida aqui eu vou nessa dívida que eu vou colocar uma classe irmãos beleza e dentro dessa dívida eu vou colocar um H1 com Loren e vou colocar um p com Loren também então tem aqui dois irmãos eu tenho uma Dive que é que é o vou chamar de pai né que é melhor eu tenho uma dívida aqui que seria o pai né de todo esses elementos que estão dentro dela e eu tenho dois irmãos aqui eu vou colocar mais pra é mais mais coisas para a gente ver aqui ó Então vou colocar

mais uns dois parágrafos aqui e vou duplicar esse aqui tudo ó então isso aqui tudo todos esses elementos o H1 e todos esses PS mais esse H1 em todos esses PS são irmãos no caso aqui eu posso selecionar ele se eu quiser então para eu selecionar ele eu vou utilizar o pai no caso aqui deles eu tô utilizando o pai que só porque eu coloquei ali e é mais real né no caso a gente usar esses tipos de seletores do que a gente selecionar só os elementos Mas eu posso falar que eu quero o pai

no caso que tem um H1 só que eu quero selecionar todo P que tiver depois de um H1 que for irmão de um H1 e que tiver logo depois de um H1 para eu fazer isso eu posso falar utilizar o sinalzinho de mais aqui vou colocar aqui um color red só para você ver então essa seleção que eu fiz foi o seletor de irmãos aqui que chama acho que é isso mesmo adjacente sibling selector é exatamente isso então adjacentivo em selector tudo isso que eu te falo aqui você pode pesquisar e ver que é o

sinalzinho de mais aqui beleza então isso aqui seleciona todo o elemento que tiver diretamente depois do elemento que você falar aqui isso aqui quer dizer basicamente para um elemento que tem a classe pai e aí você encontra um p que vier depois de um H1 aqui beleza basicamente assim que funciona se eu invertesse isso daqui olha que interessante vou voltar aqui ó e vou inverter eu vou falar que eu quero um p mas H1 que que isso aqui significa agora significa que tem t1h1 logo depois de um p se a gente observar aqui ó esse

essa primeira seleção é basicamente isso eu tenho um H1 eu vou selecionar o p que está logo depois joga um essa outra seleção já é o contrário eu tenho um p aqui nesse caso eu vou selecionar esse H1 que depois do P Beleza então agora vou colocar aqui cor Yellow E aí você vai ver que esse H1 aqui ó que vem logo depois do p foi selecionado Beleza então esse é o adjacentibles selector a gente tem também um outro que chama selector esse outro seletor de general cibling selector ele seleciona todos os elementos que vem

depois de um elemento então você vê que aqui é um elemento né se eu fizer essa mesma seleção utilizando o general cible em selector vou apagar esse aqui eu vou fazer a seleção para todos os elementos que vem depois desse elemento que eu falar aqui então por exemplo depois do H1 todos os PS E aí ele vai selecionar todos mesmo tá então selecionando você vê que depois de um H1 todos os pés se eu tivesse um p Antes desse H1 ele não seria selecionado se eu tivesse um p aqui antes desse seletor ele não seria

selecionado porque ele vem logo depois do P E isso como eu te falei com classes com drives eu tô te mostrando com as tags porque é mais simples mas se eu tivesse aqui por exemplo uma dívida vamos falar assim eu tenho uma dívida vou colocar um aqui o valor Class é vou chamar de One só para ficar simples ou um né em português então eu tenho a divium aqui vou colocar várias outras dívidas aqui no caso com a com a classe 1 e daí se eu tivesse Vamos colocar dois aqui no caso nessas outras aqui

eu vou colocar dois aqui e aí eu duplico essas que tem a classe 2 Beleza não tem um aí dois dois e aí vou duplicar isso daqui e eu vou colocar uma dois antes do um aqui então aqui eu posso fazer essa seleções por exemplo Suponha que eu quero selecionar todas as classes dois que estão dentro da classe um que estão dentro ou não depois aliás é que são irmãos aqui né então aqui ó eu quero selecionar todas as classes dois que estão dentro de um vou começar pelo dois mas na verdade que eu tenho

que colocar o ponto um E aí todas porque é o general sibling select então eu tô selecionando todas as classes 2 que vem depois de uma um E aí eu nem precisaria ter esse um aqui no meio do caminho se eu não tivesse ele todos os dois iam ser selecionados aqui ó se eu tirar esse um aqui ó você vai ver continua funcionando da mesma maneira mas não selecionou dois que vem antes do 1 beleza e aí esse é o inverter essa seleção eu inverter também a maneira que foi apresentada aqui agora se eu quisesse

somente o primeiro dois que vem depois de um aí Eu mudaria para o adjacentes E aí selecionando ó somente os dois que vem logo depois de um aqui beleza isso funciona exatamente da mesma maneira continuando com os nossos seletores aqui a gente também pode selecionar por atributo não por exemplo Suponha que eu queira selecionar deixa eu te mostrar um negócio interessante aqui é eu que selecionar vou colocar um H1 aqui qualquer vou colocar uma classe Reading que lorem vou colocar uns peso aqui com a classe para p vou chamar de classe P só e aí

vou colocar um texto aqui também né e vou duplicar esse P aqui então Imagine que algum local do meu do meu documento eu coloco um atributo E aí no HTML a gente pode criar os nossos próprios atributos se a gente quiser para a gente usar com jeffscript ou com ss por exemplo Imagine que eu tenho aqui meu atributo beleza então nesse H1 aqui eu tenho o meu atributo deixa eu duplicar o texto todo aqui ó para você ver isso sendo aplicado somente em quem tem esse atributo meu tributo então Suponha que eu queira selecionar esse

atributo como é que eu faço se eu quiser selecionar especificamente Aquele atributo é só eu colocar o atributo em colchetes aqui falar o que eu quero fazer eu quero color red aqui em quem tem aquele meu tributo então selecionei exatamente o atributo que eu falei se você passar o mouse aqui ó o elemento tem que ter meu atributo exatamente isso que ele tá falando aqui em qualquer lugar que ele tiver na página como a gente só tem um aqui que tem o meu atributo só ele foi selecionado Mas eu também posso e devo né porque

às vezes eu preciso disso colocar algum valor qualquer aqui dentro do meu atributo então às vezes você tá vendo que ele continua selecionado né Porque eu selecionei só o que tem o atributo mas no CSS Eu ainda posso falar também que ele pode ter um valor qualquer e ele continua sendo selecionado aqui e aí eu posso depender do valor Suponha que esse valor mude com Java script ou com alguma coisa com alguma coisa que eu queira aqui se eu mudar esse valor para qualquer outra coisa ele não vai ser mais selecionado Então esse esse aqui

com o valor é mais específico do que somente o nome do atributo então você que sabe e eu também posso selecionar coisas que tem já atributos padrão esse aqui foi o ATR que eu criei né mas eu posso por exemplo pegar um input type igual a checkbox no caso aqui E esse input vai ser esse input aqui né vou colocar dois aqui ó e vou falar que o um deles tá chato Beleza então um tá marcado e outro tá desmarcado Eu posso também selecionar é pelo atributo chat aqui no caso tem na verdade um seletor

específico mas aqui eu tô te mostrando seletor de atributo tá depois eu vou te mostrar umas pseudo classes e uns pseudo elementos que são específicos para isso aqui mas aqui ó só querendo te mostrar um elemento que já vem que dá para eu selecionar aqui ê meu teclado que dá para selecionar aqui um atributo padrão do do do HTML aqui no caso então aqui no caso Ó coloquei chact no caso que é o nome do tributo e daí eu posso colocar sei lá vou colocar só pra gente conseguir ver alguma coisa 50 Pixel e 50

pixels no caso você vê que o que tá marcado ele muda de tamanho aqui no caso e se eu tirar esse no caso aqui e olha que interessante Então assim específico essa seleção de atributo que quando eu mudo aqui ó no caso ele não muda e vai ser diferente você não vai fazer essa seleção aqui para esse tipo de checkbox eu só queria te mostrar que você pode selecionar para atributos padrão também mas quando a gente for fazer essa seleção no caso que a gente vai utilizar pseudoclasse checked beleza aí só que a gente vai

falar disso na outra aula Beleza então esse é o seletor de a gente vê o seletores nessa aula de irmãos né no caso que a gente viu adjacentes selector e o general sempre selector e a gente viu seletor de atributo HTML e daí isso aqui novamente eu só tô te mostrando que dá para você selecionar também atributos padrão do HTML mas que não é assim que a gente trabalha com porque a gente vai trabalhar com pseudoclasses e pseudo elementos que a gente vai falar em outra aula