Como selecionar um elemento em CSS se não soubermos sua classe ou identificador

Inscreva-se no meu canal:  

Recursos usados:

Ajuda no Stackoverflow

Ajuda na referência do seletor CSS

Transcrição do vídeo

Ola pessoal, como estão?

Neste vídeo veremos como podemos modificar o estilo, o design de qualquer formulário ou qualquer outro elemento de nossa página web se não tivermos um identificador e uma classe.

Vamos ver como fazer isso por css se estiver faltando esses elementos, a classe ou o identificador.

É algo que um aluno me pediu e vamos ver como poderia ser feito, parece-me muito interessante e é por isso que eu queria mostrar a você que é feito de uma maneira muito simples, também para fazê-lo vamos usar a ajuda e neste caso vamos ver que além dos identificadores e das classes podemos fazer chamadas através dos atributos.

Então graças a isso podemos fazer isso, não se assuste com tudo o que você vê aqui porque vamos fazer de uma maneira muito simples, neste caso vou modificar essa tag, na tag name mas não Não quero que a tag de e-mail seja modificada, então, se eu clicar com o botão direito, inspecionar, posso ver o código-fonte no chrome.

Nesse caso, se você perceber que esse rótulo tem uma classe mas eu não vou usar, imagine que não tinha essa classe, é bem simples, aliás, se eu selecionei e aqui eu clico em mais vai gerar uma regra já com a classe escrita mas neste caso vou deletar a classe pois vou imaginar que ela não existia, então graças ao atributo, neste caso, FOR que é o atributo que temos aqui.

Se percebermos que o atributo tem o valor input_2_8, se vou selecionar, por exemplo, a tag email, vemos que é input_2_2, ou seja, cada uma dessas tags tem um valor diferente, então posso modificar uma e não a descanso.

Como eu disse vou selecionar na tag name e vamos criar uma regra, não vou usar essa classe e o que vou fazer aqui é o seguinte eu abro colchetes eu fecho colchetes e aqui no middle eu adiciono que quando o atributo for é o mesmo eu abro e fecho aspas embora se eu não fizesse isso também funcionaria e eu coloquei que é igual a input_2_8 , vou dizer que quero que a cor seja igual ao vermelho, ou seja, vermelho.

Portanto, observe que apenas este rótulo foi modificado, o restante permanece o mesmo.

Eu consegui usar o rótulo aqui, mas usando os atributos conseguimos modificar isso e também é muito interessante porque se descobrirmos aqui na ajuda, algo pode ser feito que pode ser ainda mais útil.

Eu posso imaginar que eu só quero que a cor seja alterada ou que coloque um ícone por exemplo quando for um link para um pdf ou quando tiver uma url específica por exemplo como você pode ver aqui para que possamos fazer isso para alterar qualquer um os atributos neste caso eu vou fazer uso dessa regra e você vai ver como funciona.

Se eu entrar aqui na minha página aqui vemos que eu tenho um link, neste caso eu tenho o link que está aqui e como vocês podem ver eu não tenho classe, nem identificador, desse link como eu poderia modificá-lo, veja bem se eu clicar assim Neste caso, se eu fizer apenas uma regra para todos os links, todos eles seriam modificados, mas não quero que todos sejam modificados, quero apenas os links que tem, por exemplo , no link escrito como fazer uma página.

Por exemplo, o que posso fazer aqui é abrir colchetes e fechá-los, gosto de fechá-los no início para não esquecer, e peço que quando o atributo href estiver presente, vou colocar um asterisco nele, como vimos na ajuda, para tudo que está aqui no meio e vou te dizer que , escrevo colchete e fecho coloco href asterisco o mesmo abro e fecho aspas e aqui estou vou dizer por exemplo que poderia ser escrito como fazer uma página e aqui vou dizer que quero que a cor também seja vermelha, por exemplo, e você vê que mudou.

Além do mais, se eu falar aqui para você mudar os links quando o link é como fazer uma página eu coloco outra coisa aqui, você vai ver que não muda porque não está escrito outra coisa lá ao invés se eu colocar aqui para exemplo simplesmente Como fazer uma página é isso que funciona.

Então podemos ser específicos para que não haja mais casos, mas podemos ver que nem sempre precisamos de uma classe ou um identificador para poder modificar as coisas por css.

Parece-me que pode tirar-nos de muitos problemas, por isso trago-vos este tutorial, espero que tenham gostado, até a próxima 😉

Você quer aprender mais? Introduzir o área premium

Deixe um comentário