1. Selectores Básicos

Este es un párrafo con selector por etiqueta.

Este es un párrafo con selector por clase.

Este es un encabezado con selector por ID.

Haz clic aquí

2. Selectores Avanzados

Enlace HTTPS Enlace HTTP

Párrafo descendiente 1

Párrafo descendiente 2

Hijo directo 1

No es hijo directo

Título

Primer párrafo hermano adyacente

Segundo párrafo (no afectado)

Otro Título

Primer párrafo hermano general

Segundo párrafo hermano general

Enlace con hover

Texto con pseudoelemento

3. Combinaciones de Selectores

Primer párrafo dentro de un div con clase "special".

Segundo párrafo dentro de un div con clase "special".

Este párrafo no pertenece a un div con clase "special".

4. Selectores de Tipografía

Primer párrafo dentro del contenedor (negrita).

Segundo párrafo dentro del contenedor.

Elemento 1
Elemento 2
Elemento 3
Elemento 4

Ejemplo práctico: Lista numerada con estilos alternantes

Elemento 1
Elemento 2
Elemento 3
Elemento 4

5. Selectores Estructurales

Este texto utiliza una variable CSS definida en :root.

Este párrafo tiene contenido.

Este párrafo tiene la clase "highlight".

Este párrafo no tiene la clase "highlight".

Ejemplo práctico: Tema oscuro

Texto de ejemplo para el tema claro/oscuro.

Demo de Selectores CSS