Estoy tratando de que solo uno de ellos sea de un color diferente.

#red li {
  color: red;		
}
<ul>
  <li id="red">Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ul>
1
Canto.III 22 ene. 2018 a las 20:54

3 respuestas

La mejor respuesta

`Aquí tienes.

li#red{
  color: red;		
}

OR

#red{
  color: red;		
}
<ul>
  <li id="red">Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ul>

Hay muchas formas de apuntar a un elemento en DOM usando CSS.

Comúnmente utilizados son:

# usado cuando el elemento objetivo tiene un atributo id.

. usado cuando el elemento objetivo tiene un nombre class.

También puede apuntar a un elemento directamente. Pero puede haber muchos elementos del mismo tipo.

En su caso, hay exactamente un elemento <li> con un id. Entonces, para apuntar que puede usar li#id{property: value} o simplemente #id {property: value} ya que ids son altamente específicos y únicos.

0
rach8garg 22 ene. 2018 a las 18:12

También puede usar la etiqueta de estilo html.

<ul>
  <li style="color:red">Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ul>
0
I'm just a coder for fun 22 ene. 2018 a las 18:51
li#red{
  color: red;		
}
<ul>
  <li id="red">Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ul>
/*If you like to change just text color not bullet, please try the following one:*/

li #red{
  color: red;		
}
<ul>
  <li><span id="red">Coffee</span></li>
  <li>Tea</li>
  <li>Milk</li>
</ul>
0
Sanau 23 ene. 2018 a las 05:04