Find html element in css

Question

I need to find a specific element of what is in my html code only in css, exemplifying:

It’s like:

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

Only the doubt is on how I find an element like id="textoUm" of my html by ID, not just to pick up and do [id=textoUm].

How can I do that? I’ve searched several websites and I haven’t been able to.

Answer 1

Using the attr css would look like this: (note the attr construction [id="textOne"])

[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: But if you will put the css using the ID you don’t have to use the attr[] directly create the class #textoUm {seu css}

When you put the style on ID has to start the name by #textoUm {} and when it creates a style to class has to start the name by .textoUm {}

Mozilla documentation link about css attr https://developer.mozilla.org/en-US/docs/Web/CSS/attr is in PT and will help you worth reading

Answer 2

When you want to use with id or class is simpler

Example with id:

#textoUm{
    color: #FFFFFF;
}

Example with class:

.textoUm{
    color: #FFFFFF;
}

Or if you want something like, an input with class 'textUm' for example, you can do so:

input.textoUm{
    color: #FFFFFF;
}

Or with some id:

input#textoUm{
    color: #FFFFFF;
}

A small example:

.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>