Lección 2: Selectores CSS, Especificidad, Cascada y Herencia
Selectores CSS
Los selectores CSS son patrones utilizados para seleccionar los elementos HTML que queremos estilizar. Hay varios tipos de selectores:
Selectores básicos
- Selector de elemento: Selecciona todos los elementos de un tipo específico.
- Selector de clase: Selecciona elementos con una clase específica.
- Selector de ID: Selecciona un elemento con un ID específico.
- Selector universal: Selecciona todos los elementos.
p { color: blue; } /* Selector de elemento */
.destacado { font-weight: bold; } /* Selector de clase */
#titulo-principal { font-size: 24px; } /* Selector de ID */
* { margin: 0; padding: 0; } /* Selector universal */Selectores combinadores
- Descendiente (espacio): Selecciona los descendientes de un elemento.
- Hijo directo (>): Selecciona los hijos directos de un elemento.
- Hermano adyacente (+): Selecciona el hermano inmediatamente siguiente.
- Hermanos generales (~): Selecciona todos los hermanos siguientes.
div p { color: green; } /* Descendiente */
ul > li { list-style-type: square; } /* Hijo directo */
h1 + p { font-weight: bold; } /* Hermano adyacente */
h1 ~ p { margin-left: 20px; } /* Hermanos generales */Especificidad
La especificidad es el mecanismo que utiliza CSS para determinar qué regla se aplica cuando hay conflictos. Se calcula como un valor de cuatro números:
- Estilos en línea
- IDs
- Clases, atributos y pseudo-clases
- Elementos y pseudo-elementos
Cuanto mayor sea el número en una posición más a la izquierda, mayor será la especificidad.
#nav .lista li a { color: green; } /* 0,1,1,3 */
nav ul li a { color: red; } /* 0,0,0,4 */
.nav a { color: blue; } /* 0,0,1,1 */En este ejemplo, el color verde se aplicará debido a su mayor especificidad.
Cascada
La cascada es el algoritmo que CSS usa para resolver conflictos cuando múltiples reglas se aplican al mismo elemento. El orden de importancia es:
- Importancia (!important)
- Especificidad
- Orden de aparición
p { color: red !important; } /* Se aplicará este */
#contenido p { color: blue; } /* Mayor especificidad, pero no es !important */
p { color: green; } /* Aparece después, pero menor especificidad */Herencia
La herencia permite que los elementos hijos hereden ciertas propiedades de sus elementos padres. No todas las propiedades se heredan por defecto.
body {
font-family: Arial, sans-serif;
color: #333;
}
/* Todos los elementos dentro de body heredarán estas propiedades */Puedes forzar la herencia usando el valor 'inherit' en una propiedad.
Ejercicio práctico
Crea un documento HTML con una estructura anidada (por ejemplo, div > section > article > p) y aplica estilos que demuestren los conceptos de selectores, especificidad, cascada y herencia.