Seletores de atributos no CSS - Curso de HTML e CSS - Aula 17

fala pessoal continuando aqui com os nossos seletores CSS agora a gente vai falar um pouquinho mais sobre esse seletor de atributo aqui esse seletor de atributo Ele é bem assim útil no caso e a gente pode utilizar ele para fazer umas coisas interessantes por exemplo a gente sabe que a gente pode selecionar pelo nome do atributo somente fazendo isso aqui que a gente viu anteriormente Então somente o nome do atributo já seleciona o meu atributo ali né mas é muito assim mais específico e até melhor a gente trabalhar com valores também então se eu quero

trabalhar com o nome da tributo e o valor a gente viu que a gente pode fazer aquilo que a gente fez anteriormente então se eu voltar aqui ó eu posso falar que eu quero um atributo que tenha o nome de meu atributo e tenha um valor isso funciona tanto para os seus atributos quanto para atributos padrão do HTML só que aqui dentro agora dentro do valor eu consigo especifica algumas coisas interessantes então por exemplo é Imagine que meu atributo tenha uma lista de valores separados aqui por espaço eu tenho valor um valor dois e valor

3 no caso aqui e daí eu quero selecionar aqui um desses valores e não eu posso utilizar um tio aqui no caso e falar que eu quero que tenha pelo menos o valor dois ali ou então o valor três naquela lista de espaço ou valor um qualquer um dos valores que eu quiser eu posso selecionar então esses valores Você tá vendo que eles estão separados por espaço aqui ó aqui eu tô selecionando o valor um se esse valor tiver colado aqui não ia funcionar tá vendo Então são só valores que estão separados por espaço aqui

eu não sei se eu posso dar vários espaços é a quantidade de espaço é que não faz a mínima diferença tá você pode colocar vários espaços contando que eles estejam separados por espaço aqui beleza então para fazer essa seleção eu utilizo esse tio aqui um outro de seleção que eu posso ter é se eu tiver palavras separadas por traço por exemplo Suponha que meu valor fosse traço a o valor eu deixei um monte de espaço ali valor traço a valor traço B Às vezes a gente usa esses valores assim valor traço C se eu quero

selecionar ver se algum dos meus atributos tem a palavra valor seguida de um traço eu posso fazer com esse outro seletor aqui no caso e esse seletor aqui ó eu deixei valor um é só valor e esse leitor aqui ele requer que a palavra que você tá buscando aqui seja seguida por um traço poderia ser qualquer coisa qualquer coisa só que contando que qualquer coisa venha no atributo por exemplo aqui por exemplo seguida de um traço E aí traço também qualquer outra coisa E aí eu salvando aqui no caso na verdade ele nem não é

isso que eu tô te falando na verdade ele tem que começar com E esse atributo tem que ser seguido de um traço agora que eu tô pensando aqui então ele tem que começar com isso aqui nesse local aqui beleza aí sim ele seleciona se ele não tiver no comecinho e não for seguidos de um traço Provavelmente você não vai conseguir selecionar eu eu tô rindo aqui porque eu tô pensando que para que que eu vou usar isso aqui né Mas beleza isso aqui existe esse aqui eu não achei muito útil não mas ele existe aqui

também é uma outra coisa que eu posso ter E aí é bem mais útil que esse outro aqui que é começa com ou seja se o meu valor começa com o que eu pedi aqui no caso já funciona beleza aí não tem nada de ter que ter traço ter espaço começa com isso já funciona então voltando aqui ó se eu colocar começou comecou outra coisa outra e eu posso ter várias coisas se o meu outra boto começar com o que eu pesquisar lá ele já vai funcionar então voltando aqui eu fechei sem querer 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 contra o shift t para reabrir eu vou colocar aqui começou ele já funciona mas aqui é interessante porque pode ser qualquer coisa eu poderia ir tirando as palavras aqui porque vai continuar funcionando porque ele começa com isso aqui se ele começa com c

Por exemplo já funciona aqui para mim beleza então esse é o começa com a gente também tem o termina com por exemplo esse aqui termina com lll se eu fosse selecionar o termina com é um um cifrão aqui aí ele termina com lll já funciona aqui para mim E aí é a mesma coisa eu posso ir tirando porque todos terminam aqui com ele no final ali né mas aí é esse aqui também é mais útil do que aqueles outros lá e eu também tenho o seletor de Contém né no caso esse Conta aí ele é

um asterisco aqui então se contém um l já tá funcionando aqui mas se contém por exemplo vou pegar um negócio aqui do meio ou até aqui isso aqui ó se contém isso nos meus atributos ele seleciona tá vendo Normal beleza só que se eu mudar um espaço aqui ó já não funciona porque já não contém mais o que eu tô pedindo aqui beleza então Esses foram os seletores de atributo que são muito úteis e guarda isso você pode usar tanto para os seus próprios atributos quanto pros atributos padrão do htm