3

Quiero cambiar el color (incluido también cuando se hace :hover) a los items dentro del < ul >

<nav class="navbar navbar-expand-md navbar-light bg-light fixed-top">
            <i class="fas fa-space-shuttle"></i><a class="navbar-brand" href="#">Iron Jack</a>
      <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExampleDefault" aria-controls="navbarsExampleDefault" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
      </button>

      <div class="list-group-mine collapse navbar-collapse" id="navbar">
        <ul class="nav navbar-nav ml-auto">
          <li class="nav-item">
            <a class="nav-link" href="#showcase">Disponibilidad</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#informacion">Precio</a>
          </li>
          <li class="nav-item dropdown">
            <a class="nav-link dropdown-toggle" href="http://example.com" id="dropdown01" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Ciudades</a>
            <div class="dropdown-menu" aria-labelledby="dropdown01">
              <a class="dropdown-item" href="#">A Coruña</a>
              <a class="dropdown-item" href="#">Madrid</a>
              <a class="dropdown-item" href="#">Sevilla</a>
              <a class="dropdown-item" href="#">Valencia</a>
            </div>
          </li>
        </ul>
      </div>
    </nav>

He probado a ponerle mi clase propia "list-group-mine" y también a poner !important pero tampoco me cambia el color. Sin embargo si me cambia el resto de propiedades

.list-group-mine li{
    color: #41EAD4;
    font-weight: 500;
    margin-right: 50px;
    font-size: 17px;
}

--Actualizo, he añadido lo siguiente gracias a las soluciones y sigue sin cambiar el color:

.list-group-mine li{
    color: #41EAD4;
    font-weight: 500;
    margin-right: 50px;
    font-size: 17px;
}
.list-group-mine li a {
    color: #41EAD4;
}

5
  • tienes que darle color a los enlaces, no a los li
    – user7176
    Commented el 5 feb. 2019 a las 13:19
  • @blonfu a los elementos de la lista también si quiere que el estilo de lista tenga el color
    – Carmen
    Commented el 5 feb. 2019 a las 13:26
  • 3
    @Carmen En su ejemplo son todo enlaces
    – user7176
    Commented el 5 feb. 2019 a las 13:33
  • @blonfu el list-style-image (en este caso un círculo por defecto) es una propiedad de li, si sólo le das color al enlace este elemento no aparecería con el mismo color
    – Carmen
    Commented el 5 feb. 2019 a las 13:37
  • 1
    @Carmen list-style-image pone una imagen y el color no cambia, en todo caso será list-style y en eso tienes razón pero en este ejemplo es un menú de bootstrap y no tiene viñetas. Solo le daba una indicación de su problema, por eso he puesto un comentario y no una respuesta
    – user7176
    Commented el 5 feb. 2019 a las 13:46

3 respuestas 3

7

Tu pregunta ya fue respondida correctamente pero quiero desglosar más el por qué en tu caso específico el color se asigna a la etiqueta a y no a li.

De manera predeterminada la etiqueta a ya trae un color azul, no importa si usas Bootstrap o si usas CSS nativo, este color siempre será el representativo de la etiqueta.

Entonces cuando tu le dices a li que tenga un color específico estás indicando que todos los textos dentro de li deben tener ese color como lo puedes ver en el siguiente ejemplo:

.list-group-mine li{
  color: #41EAD4;
  font-weight: 500;
  margin-right: 50px;
  font-size: 17px;
}
<nav class="navbar navbar-expand-md navbar-light bg-light fixed-top">
        <i class="fas fa-space-shuttle"></i><a class="navbar-brand" href="#">Iron Jack</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExampleDefault" aria-controls="navbarsExampleDefault" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>

  <div class="list-group-mine collapse navbar-collapse" id="navbar">
    <ul class="nav navbar-nav ml-auto">
      <li class="nav-item">
        Disponibilidad
      </li>
      <li class="nav-item">
        <p>Precio</p>
      </li>
    </ul>
  </div>
</nav>

Pero ¿por que cuando dentro de un li tenemos una etiqueta a el contenido de esta no se pinta del color que estamos indicando?

Eso sucede por que tanto los navegadores como las librerías están pintando un color predeterminado directamente en dicha etiqueta lo cual sobreescribe la orden anterior, por eso es necesario indicar directamente que las etiquetas a dentro de la etiqueta li deben tener cierto color específico.

.list-group-mine li{
  color: #41EAD4;
  font-weight: 500;
  margin-right: 50px;
  font-size: 17px;
}

.list-group-mine li a {
  color: #41EAD4;
}
<nav class="navbar navbar-expand-md navbar-light bg-light fixed-top">
        <i class="fas fa-space-shuttle"></i><a class="navbar-brand" href="#">Iron Jack</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExampleDefault" aria-controls="navbarsExampleDefault" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>

  <div class="list-group-mine collapse navbar-collapse" id="navbar">
    <ul class="nav navbar-nav ml-auto">
      <li class="nav-item">
        <a class="nav-link" href="#showcase">Disponibilidad</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#informacion">Precio</a>
      </li>
      <li class="nav-item dropdown">
        <a class="nav-link dropdown-toggle" href="http://example.com" id="dropdown01" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Ciudades</a>
        <div class="dropdown-menu" aria-labelledby="dropdown01">
          <a class="dropdown-item" href="#">A Coruña</a>
          <a class="dropdown-item" href="#">Madrid</a>
          <a class="dropdown-item" href="#">Sevilla</a>
          <a class="dropdown-item" href="#">Valencia</a>
        </div>
      </li>
    </ul>
  </div>
</nav>

8
  • 2
    Por añadir algo a tu excelente explicación también se podría usar el valor inherit en la propiedad color del enlace para heredar el color definido en el <li>, así nos aseguramos que siempre coincidirá el color
    – user7176
    Commented el 5 feb. 2019 a las 16:08
  • 1
    @blonfu excelente, la verdad desconocía esa forma, muchas gracias! Commented el 5 feb. 2019 a las 16:19
  • A esta respuesta me refería en el comentario de @Carmen, por el valor inherit Commented el 5 feb. 2019 a las 16:31
  • 2
    @JavierCake entonces seguramente haya otros estilos que estén afectando a los enlaces. Deberías inspeccionar el código con las devtools del navegador que uses para encontrar qué estilos se están aplicando
    – user7176
    Commented el 6 feb. 2019 a las 10:41
  • 2
    La prioridad depende del orden de los estilos pero también de la especificidad de los selectores, si el estilo de bootstrap es mas específico que el tuyo tendrá prioridad y los sobreescribirá.
    – user7176
    Commented el 7 feb. 2019 a las 19:45
4

Como dentro de li tienes una etiqueta a, debes cambiar también el color de esta.

.list-group-mine li{
    color: #41EAD4;
    font-weight: 500;
    margin-right: 50px;
    font-size: 17px;
}
.list-group-mine li a {
    color: #41EAD4;
    }
<nav class="navbar navbar-expand-md navbar-light bg-light fixed-top">
            <i class="fas fa-space-shuttle"></i><a class="navbar-brand" href="#">Iron Jack</a>
      <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExampleDefault" aria-controls="navbarsExampleDefault" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
      </button>

      <div class="list-group-mine collapse navbar-collapse" id="navbar">
        <ul class="nav navbar-nav ml-auto">
          <li class="nav-item">
            <a class="nav-link" href="#showcase">Disponibilidad</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#informacion">Precio</a>
          </li>
          <li class="nav-item dropdown">
            <a class="nav-link dropdown-toggle" href="http://example.com" id="dropdown01" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Ciudades</a>
            <div class="dropdown-menu" aria-labelledby="dropdown01">
              <a class="dropdown-item" href="#">A Coruña</a>
              <a class="dropdown-item" href="#">Madrid</a>
              <a class="dropdown-item" href="#">Sevilla</a>
              <a class="dropdown-item" href="#">Valencia</a>
            </div>
          </li>
        </ul>
      </div>
    </nav>

5
  • 1
    Sobra que el elemento hijo tenga las mismas propiedades de color que el elemento padre en este caso, bastaría solo si se aplicara a .list-group-mine li a Commented el 5 feb. 2019 a las 14:00
  • 6
    Carmen sería muy bueno que agregaras una explicación a tu respuesta para que OP entienda de mejor manera por qué el color se debe asignar en este caso a la etiqueta a y no a li Commented el 5 feb. 2019 a las 14:40
  • @JheymanMejia no es cierto. El selector .list-group-mine li aplica el color al elemento <li> (es decir, al bullet de la lista) mientras que el selector .list-group-mine li a aplica el color al elemento <a>. Si sólo aplica a <a>, entonces los bullets no van a cambiar de color. La respuesta de Carmen es correcta.
    – user108089
    Commented el 5 feb. 2019 a las 14:50
  • 2
    @Macaroni hablo del elemento con valor inherit Commented el 5 feb. 2019 a las 16:33
  • 1
    @JheymanMejia Has dicho (cito textual): " bastaría solo si se aplicara a .list-group-mine li a ". Ese es el elemento hijo, y si sólo aplicas color a ese selector, no aplicas color a los bullets. Puedes usar el valor inherit, sí, pero eso no está en el ejemplo de Carmen ni en tus comentarios anteriores. Ha sido blonfu quien lo ha comentado y supongo que te ha parecido buena idea ;) Igual, el ejemplo de Carmen es completamente válido y correcto.
    – user108089
    Commented el 6 feb. 2019 a las 7:34
1

Desde luego las respuestas anteriores han sido muy precisas. Debes cambiar los "a" dentro de los "li", pero aun así no te funciona.

No has puesto el código de tu "head" pero dado que la sintaxis de tu código es correcta para que los enlaces cambien de color, pienso que el fallo está en el "head" (con una excepción). Pueden suceder varias cosas:

1º. No tienes enlazado el archivo css en el que haces estos cambios. 2º. Tienes enlazado el archivo css, pero la ruta está mal. 3º. Tienes enlazado el archivo css, con la ruta bien puesta, pero hay otro archivo por debajo de este que está sobreescribiendo las propiedades que has puesto. (Sube el link de este archivo por encima del que estás modificando).

Excepción a que el fallo este en las etiquetas "head":

Has modificado todo correctamente, pero no vemos el archivo css completo, por lo que es posible que dentro de ese mismo archivo, mas abajo de donde estás agregando o modificando estos datos, exista la misma instrucción para estos cambios. Como los archivos css son en cascada, si la instrucción está mas abajo de donde estás modificando se quedará como la última orden que esté escrita.

Si agregas aquí el contenido de tus etiquetas "head" te podremos decir si lo que aquí expongo es correcto.

Un saludo y suerte!.

3
  • comprobé también lo que dijiste y todo estaba bien. Los estilos CSS están bien ordenados , el archivo y la ruta CSS está bien enlazada y el link CSS está el último hacia abajo (bootstrap y fontawesome están por encima). Pues resulta que entré a las devtools del navegador como me dijeron arriba y esta condición".navbar-light .navbar-nav .nav-link " que yo no he declarado (estilos de bootstrap) me están sobreescribiendo mis instrucciones porque si lo desticko entonces si se ponen del color que quería por fin. Pero todavía sigo sin saber por qué Commented el 7 feb. 2019 a las 18:32
  • ..si mi link css está por debajo de los otros dos debería ser el que tiene prioridad.Edito: Lo he arreglado poniendo la misma instrucción pero en mi css y poniendole el color que yo quiero. Commented el 7 feb. 2019 a las 18:34
  • 1
    Muchas veces al usar bootstrap te va a pasar eso. Si tienen una clase asignada es bootstrap quien gobierna, aunque después le pongas tus clases por debajo. Siempre que pongas bootstrap ten presente que, muchas veces, vas a tener que sobreescribir los estilos del propio bootstrap en tu hoja de estilos, aunque los dos hagan referencia al mismo estilo. No tengo del todo claro porque sucede esto, dado que si pones el tuyo debajo debería bastar para sobreescribir, pero, según entiendo yo, al llamar al elemento de forma diferente, te hace el lío. Me alegra que lo solucionases. Un saludo. Commented el 8 feb. 2019 a las 8:24

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.