Fundamentos de Selectores CSS: Estructura y Tipos

¿Qué es una regla CSS?

Una regla CSS es cada uno de los estilos que componen una hoja de estilos. Cada regla está compuesta por:

• Selectores: Indican el elemento o elementos HTML a los que se aplica la regla.
• Llave de apertura: El símbolo {.
• Declaración: Especifica los estilos que se aplican a los elementos. Está compuesta por una o más propiedades CSS.
• Llave de cierre: El símbolo }.

Componentes de la declaración

• Propiedad: Característica que se modifica en el elemento seleccionado (ej. tamaño de letra, color de fondo).
• Valor: Establece el nuevo valor de la característica modificada.

Tipos de selectores en CSS

Selector descendiente

Selecciona los elementos que se encuentran dentro de otros. Un elemento es descendiente de otro cuando se encuentra entre las etiquetas de apertura y de cierre del elemento contenedor.

Ejemplo: p span {color: red;} (selecciona todos los elementos <span> dentro de un <p>).

Selector hijo

Se utiliza para seleccionar elementos que son hijos directos de otro. Ejemplo: h1 > a { ... }.

Selector hermano

Selecciona elementos que comparten el mismo nivel jerárquico. Ejemplo: h1 + h2 { ... }.

Selector de ID

Permite seleccionar un elemento único de la página a través de su atributo id. El valor del id no puede repetirse en una misma página.

La sintaxis utiliza el símbolo de almohadilla (#) como prefijo. Ejemplo: #DESTACADO { color: red; }.

Selectores de clase

Comienzan con un punto (.) y se aplican a todos los elementos asociados a una clase específica.

Ejemplo de regla: .unafechaenverde { color: green; }

Aplicación: <p class="unafechaenverde">25/06/2007</p>

Selector universal

Comienza con el símbolo * y se aplica a todos los elementos del documento. Es útil para resetear estilos predeterminados del navegador.

Ejemplo: * { padding: 0; margin: 0; }

Pseudoclases

Útiles cuando el estilo a aplicar no depende de la estructura del documento, sino del estado de un elemento.

• a:link { color: green; }: Los hipervínculos no visitados se muestran en color verde.
• a:hover { color: red; }: Los hipervínculos cambian a color rojo al pasar el cursor sobre ellos.

Selector de atributos

Permite seleccionar elementos basándose en la presencia o valor de un atributo específico.