Saltar al contenido

Especificidad en CSS explicada con ejemplos (y por qué !important es una trampa)

eduardo S.

Nivel 3 ·

Armé este resumen para mis alumnos, por si a alguien le sirve: El estilo en línea gana a todo (salvo !important). Después: ids > clases, atributos y pseudoclases > elementos y pseudoelementos. Ejemplo: #menu .item (1,1,0) gana a .nav .menu .item (0,3,0). Si empatan, gana la que aparece última.
1208 vistas 6 respuestas 3 0

Respuestas 6

  1. Feli2007

    Nivel 3 ·

    0 0

    Muy claro. Agregaría que la especificidad no se 'suma' como un número decimal: una sola id gana a cualquier cantidad de clases.

  2. TacoArquero

    Nivel 2 ·

    0 0

    Y lo de !important: es una salida rápida que se vuelve deuda. Después, para pisarlo, necesitás otro !important con más especificidad, y así hasta el infinito.

  3. antonella F.

    Nivel 2 ·

    0 0

    Las capas de cascada (cascade layers) ayudan mucho a ordenar esto en proyectos grandes.

  4. Gabriel B.

    Nivel 3 ·

    0 0

    Y :where() para escribir estilos base con especificidad cero, fáciles de pisar.

  5. Benjamín R.

    Nivel 3 ·

    0 0

    El selector universal (*) y los combinadores como > o + no suman especificidad. Pregunta típica de examen.

  6. eduardo S.

    Nivel 3 ·

    0 0

    Lo de que una id gana a cualquier cantidad de clases lo voy a destacar en el resumen. Gracias!