Selectores y cascada

CSS (Cascading Style Sheets) es el lenguaje que controla la presentación visual. Se escriben reglas; cada regla tiene un selector que apunta a elementos y un bloque de declaraciones con pares de propiedad y valor.

Los tres selectores fundamentales son: tipo, que apunta a todos los elementos de una etiqueta (p); clase, que apunta a los elementos con una clase (.card); e ID, que apunta a un elemento mediante su id (#logo). Prefiera las clases: los ID tienen una especificidad muy alta.

Seleccione por valor de atributo con [type="email"]. Use pseudoclases para los estados: :hover, :focus, :active, :checked, :nth-child(), :first-child y :last-child.

Los combinadores describen las relaciones entre elementos: espacio (descendiente), > (hijo directo), + (hermano adyacente), ~ (hermano general).

Cuando varias reglas apuntan al mismo elemento, la especificidad determina cuál prevalece. Los selectores de ID (0,1,0,0) prevalecen sobre los selectores de clase (0,0,1,0), que prevalecen sobre los selectores de tipo (0,0,0,1). Los estilos en línea prevalecen sobre todos. !important prevalece sobre todo; úselo como último recurso.

Cuente por separado los ID, las clases/atributos/pseudoclases y los tipos. Compare columna por columna. Ejemplo: #nav .link:hover = (0,1,1,1). .nav a = (0,0,1,1). El primero prevalece.

Cuando la especificidad es igual, prevalece la regla que aparece después en la hoja de estilos. Esta es la C de CSS: la cascada. Tanto el orden de importación como el orden de origen son importantes.

Algunas propiedades de CSS se heredan de forma predeterminada: los elementos secundarios reciben el valor del elemento principal sin que tenga que establecerlo. Las propiedades relacionadas con el texto, como color, font-family y line-height, se heredan. Las propiedades del modelo de caja, como margin, no se heredan.

:is() y :where() permiten escribir selectores concisos que coinciden con cualquiera de una lista. La diferencia es que :is() hereda la especificidad más alta de sus argumentos, mientras que :where() siempre tiene especificidad cero.

El selector universal * coincide con todos los elementos. Se utiliza habitualmente en los reseteos de CSS: *, *::before, *::after { box-sizing: border-box; }, lo que hace que el modelo de caja sea mucho más predecible.

Los navegadores aplican su propia hoja de estilos predeterminada (la hoja de estilos del agente de usuario) antes que la suya. Los reseteos de CSS (como normalize.css) o las capas de CSS neutralizan estos valores predeterminados para que su estilo parta de una base conocida.

¿Qué selector tiene la especificidad más alta?

Apunte a los elementos con selectores de tipo, clase, ID, atributo y pseudoclase. La especificidad resuelve los conflictos (ID > clases > tipos). La cascada deshace los empates mediante el orden de origen. La herencia propaga automáticamente los estilos de texto a los elementos descendientes.