Selectores y la cascada

Cuando dos reglas le dan colores distintos al mismo elemento, CSS no adivina. Compara los selectores, y un id le gana a cualquier cantidad de clases.

Elegir elementos

Un selector es un patrón que coincide con elementos de la página. Los más sencillos coinciden por nombre de elemento, por clase o por id. p es un selector de tipo y coincide con todos los párrafos. .note es un selector de clase y coincide con todo elemento que tenga class="note"; un elemento puede tener varias clases separadas por espacios, y una clase puede usarse en muchos elementos. #intro es un selector de id y coincide con el único elemento que tiene id="intro". *, el selector universal, coincide con todo.

p { line-height: 1.5; }            /* every p */
.note { background: #fff4d6; }     /* class="note" */
#intro { font-size: 20px; }        /* id="intro" */
h1, h2 { font-weight: 600; }       /* group: h1 and h2 */
nav a { text-decoration: none; }   /* a anywhere inside nav */
ul > li { margin: 4px 0; }         /* li that is a direct child of ul */
a:hover { text-decoration: underline; }
input[type="email"] { width: 20em; }

Combinar selectores

Una coma agrupa selectores que comparten las mismas declaraciones, así que h1, h2 da estilo a ambos. Un espacio es el combinador de descendientes: nav a coincide con los enlaces que estén en cualquier lugar dentro de un nav, a cualquier profundidad. > es más estricto y solo coincide con los hijos directos. Escribir dos selectores simples juntos, sin espacio, como en a.active, significa que un mismo elemento debe cumplir ambos: un enlace que además tiene la clase active. Los selectores de atributo, entre corchetes, coinciden según un atributo, como input[type="email"].

Las pseudoclases, que se escriben con dos puntos simples, seleccionan elementos en cierto estado o posición: :hover mientras el puntero está encima, :focus-visible cuando tiene el foco del teclado, :first-child cuando es el primer hijo de su padre. Los pseudoelementos, que se escriben con dos pares de dos puntos, dan estilo a una parte de un elemento, como ::first-line o ::placeholder.

Cuando las reglas no coinciden

Muchas veces varias reglas fijan la misma propiedad en el mismo elemento. La cascada, la C de CSS, decide cuál gana. Dejando de lado los estilos propios del navegador y !important, dos preguntas resuelven casi todos los casos. Primero, ¿qué selector es más específico? La especificidad se cuenta con tres números: ids, luego clases (incluidos los selectores de atributo y las pseudoclases), luego nombres de elemento. #menu a suma 1-0-1, .active suma 0-1-0 y nav a suma 0-0-2. Los números se comparan desde la izquierda, así que un id le gana a cualquier cantidad de clases. Segundo, si la especificidad es igual, gana la regla que aparece después en la hoja de estilos.

Los atributos style en línea le ganan a cualquier selector, y una declaración marcada con !important le gana a las normales. Las dos son soluciones rápidas tentadoras, pero hacen más difícil el siguiente cambio, porque la única forma de anularlas es con más de lo mismo. La mayoría de los equipos mantiene la especificidad baja y pareja, dando estilo sobre todo con clases, para que el orden en el archivo baste para predecir el resultado.

Herencia

Algunas propiedades pasan de padre a hijo de forma automática. Fija color o font-family en body y todos los párrafos, listas y celdas de tabla de dentro lo toman, a menos que una regla les fije el suyo. Las propiedades relacionadas con el texto suelen heredarse; las relacionadas con la caja, como width, padding, border y margin, no. Por eso un borde en una sección no aparece alrededor de cada párrafo que hay dentro. La palabra clave inherit obliga a una propiedad a copiar el valor de su padre.

Ponle nombre a las clases según lo que algo es, no según cómo se ve. .warning sigue teniendo sentido cuando el diseñador cambia el color de rojo a naranja; .red-text no. Los id son únicos, así que conviene reservarlos para destinos de enlaces y etiquetas de formulario en lugar de usarlos para dar estilo. Así la especificidad se mantiene baja.