Prioridad de selectores

<< Por clase Selecciones mixtas >>

¡IMPORTANTE! ¿Qué pasa si aplicamos varias veces la misma propiedad a un mismo elemento?. Hay un orden de prioridad establecido de mayor a menor: id, clase, elemento.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Ejemplo selectores</title>
    <link rel="stylesheet" href="selectores.css">
</head>
<body>
    <form action="#" method="post">
        <button class="btn-page">Atrás</button>
        <button id="sig" class="btn-page">Siguiente</button>
        <button class="btn-cancel">Cancelar</button>
   </form>
</body>
</html>

Los 3 afectan al elemento <button> de arriba donde el color de fondo será chocolate, ya que el identificador (id) es el que mayor prioridad tiene. Si este se eliminase, se le aplicaría el color gray ya que el selector de clase es el siguiente que más prioridad tiene.

Si se modifica más de 1 vez la misma propiedad para un mismo elemento, pero ambas modificaciones tienen la misma prioridad, se le aplicará la última especificada (de ahí el nombre de Hojas de Estilo en Cascada).

#sig.btn-page {
    /* Asignamos estilo sólo a los elementos p que tengan la clase btn-page */
    background-color: chocolate;
    background-color: darkcyan;
    color: white;
}

Se aplicaría un color darkzyan porque es la última modificación y ambas tienen la misma preferencia (clase).

<< Por clase Selecciones mixtas >>