3

Eu preciso encontrar um elemento especifico do que está no meu código em html só que no css, exemplificando:

Da pra fazer tipo:

meuElemento [type=input]{
    color: #FFFFFF;
}

Só que a duvida está em como eu encontro um elemento como id="textoUm" do meu html por ID, não da pra simplesmente pegar e fazer [id=textoUm].

Como eu consigo fazer isso? Já procurei diversos sites da internet e não consegui.

2 Respostas 2

4

Usando o attr do css ficaria assim: (repare na construção do attr [id="textoUm"])

[id="textoUm"] {
 border: 2px solid red;
}

input { 
 border: 2px solid black;
}
<input type="text" id="textoUm" value="com ID">
<input type="text" value="sem id">

OBS: Mas se vc vai colocar o css usando o ID não tem por que usar o attr[] crie direto a classe #textoUm {seu css}

Quando vc coloca o estilo no ID tem que que começar o nome por #textoUm {} e quando cria um estilo para por na classe tem que começar o nome por .textoUm {}

Link da documentação da Mozilla sobre o css attr https://developer.mozilla.org/pt-BR/docs/Web/CSS/attr está em PT e vai te ajudar vale a leitura

4
  • Valeu, era isso mesmo, mas acho que eu não estava acertando a sintaxe, tipo eu estava tentando colocar em um p ai estava assim p [id=textoUm]{ não da pra fazer esse tipo de seleção?
    – Groot
    Commented 9/05/2018 às 13:31
  • Da sim! Mas o certo seria assim p[id="textoUm"] com o P sem espaço do [ e com o valor do ID entre aspas id="textoUm"
    – hugocsl
    Commented 9/05/2018 às 13:39
  • 1
    Pow, valeu ai pela ajuda era isso mesmo que eu queria.
    – Groot
    Commented 9/05/2018 às 13:40
  • @Groot dmr tmj!
    – hugocsl
    Commented 9/05/2018 às 13:40
3

Quando você quer utilizar com id ou class é mais simples

Exemplo com id:

#textoUm{
    color: #FFFFFF;
}

Exemplo com class:

.textoUm{
    color: #FFFFFF;
}

Ou se quiser algo como, um input com a class 'textUm' por exemplo, você pode fazer assim:

input.textoUm{
    color: #FFFFFF;
}

Ou com algum id:

input#textoUm{
    color: #FFFFFF;
}

Um pequeno exemplo:

.texto{
  color: #f00;
}
#texto{
  color: #00f;
}
input.texto{
  color: #0f0;
}
input#texto{
  color: #ff0;
}
<input type="text" value="teste" class="texto" />
<input type="text" value="teste" id="texto" />
<div class="texto">teste</div>
<div id="texto">teste</div>

3
  • Sim, mas não tem como fazer do jeito que eu coloquei la?
    – Groot
    Commented 9/05/2018 às 13:19
  • 1
    Nosso amigo hugocsl, postou uma resposta da forma que você deseja Commented 9/05/2018 às 13:23
  • 1
    Vlw a consideração jovem!
    – hugocsl
    Commented 9/05/2018 às 13:24

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .