4

Lo que quiero hacer es dar color solo a un Texto de la barra de navegación y a los demás dejarlos en blanco ya que el fondo es oscuro, Ya puse todos los textos en blanco que son Etiquetas "a", pero el problema es cuando intento cambiar a otro color un solo texto que le puse una clase de nombre "button" y no cambia el color porque supongo que vale mas un selector de Etiqueta que un selector de Clase, Quisiera saber de que forma puedo solucionarlo, ya se que podría poner una clase diferente a todas las etiquetas menos a la que quiero cambiar y así si resulta lose ya lo hice pero quisiera saber si existe otra forma o es la única.?

Aqui les dejo el codigo:

header {
    width: 100%;
    background-color: #18162c;
    height: 70px;
}
.nav  {
    width: 65%;
    margin: auto;
    height: 100%;
}
.grid li a{
    text-decoration: none;
    color: #ffffff;
    font-size: 20px;
    font-family: SF Pro Display;
    font-weight: 200;
}
.grid li {
    text-align: center;
}

.button {
    color: #1D9AF2;
    background-color: #292D3E;
    border: 1px solid #1D9AF2;
    border-radius: 6px;
    padding: 8px 24px;
    cursor: pointer;
    height: 20px;
    font-size:18px;
    box-shadow: 0 0 4px #999;
    background-position: center;
    transition: background 0.2s;
    }
    .button:hover {
    background:#47a7f5 radial-gradient(circle, transparent 1%, #47a7f5 1%) center/15000%;
    color: white;
    }
    
    
    /*Aqui e codigo de CSS GRID*/
    
    
    .grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: 1fr;
    height: 100%;
    align-items: center;
    grid-gap: 20px;
}
<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="./reset1.css">
    <link rel="stylesheet" href="./style.css">
    <link rel="stylesheet" href="./grid.css">
    <title>Document</title>
</head>
<body>
    <header>
        <nav class="nav box">
            <ul class="grid box">
                <li><a href="#">Lorem</a></li>
                <li><a href="#">Lorem</a></li>
                <li><a href="#">Lorem</a></li>
                <li><a href="#" class="button">Lorem</a></li>
            </ul>
        </nav>
    </header>
</body>
</html>

1 respuesta 1

2

El detalle de que no reconozca un estilo que colocas por medio de una clase es por que previamente definiste otro con esta sintaxis:

.grid li a

Donde pesa mas por que tiene una clase y 2 etiquetas entonces lo vuelve mas específico que una simple clase.

Lo que tal vez te convenga mas para no mover lo que ya llevas es que al elemento que deseas le agregues una clase que sirva para que la nueva regla CSS sea aún mas específica y por lo tanto el estilo se aplique.

Por ejemplo al primer li:

<li><a class="modificado" href="#">Lorem</a></li>

Posterior al final de todas tus reglas CSS escribes lo que sigue:

.grid li a.modificado {
      color: color;
 }

Con lo anterior ya podrías estar colocando un valor solo para ese texto

Referencia

1
  • 1
    Excelente si por eso decia que predomina el selector de una etiqueta pero al ya poner la clase despues de la etiqueta no hay problema gracias por la ayuda. Commented el 21 abr. 2020 a las 1:25

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.