Selectores

¿Qué es un selector en CSS?

Un selector en CSS es una parte del código que indica a qué elementos HTML se aplicarán las reglas de estilo definidas. Los selectores permiten seleccionar uno o más elementos basados en su nombre de etiqueta, clase, ID, atributos, o incluso su posición en el árbol del DOM.

Tipos de Selectores

1. Selectores de Tipo

Seleccionan todos los elementos de un tipo específico. Por ejemplo, p selecciona todos los párrafos.

p {
    color: blue;
}

2. Selectores de Clase

Seleccionan todos los elementos con una clase específica. Por ejemplo, .mi-clase selecciona todos los elementos con la clase mi-clase.

.mi-clase {
    color: red;
}

3. Selectores de ID

Seleccionan un elemento único basado en su ID. Por ejemplo, #mi-id selecciona el elemento con el ID mi-id.

#mi-id {
    color: green;
}

4. Selectores de Atributo

Seleccionan elementos basados en un atributo y su valor. Por ejemplo, a[href] selecciona todos los enlaces (<a>) que tienen un atributo href.

a[href] {
    color: orange;
}

5. Selectores de Descendiente

Seleccionan elementos que son descendientes de un elemento específico. Por ejemplo, div p selecciona todos los párrafos dentro de un <div>.

div p {
    color: purple;
}

6. Selectores de Hijo

Seleccionan elementos que son hijos directos de un elemento específico. Por ejemplo, div > p selecciona todos los párrafos que son hijos directos de un <div>.

div > p {
    color: brown;
}

7. Selectores de Hermano Adyacente

Seleccionan un elemento que es el siguiente hermano adyacente de otro elemento. Por ejemplo, h1 + p selecciona el párrafo justo después de un <h1>.

h1 + p {
    color: pink;
}

8. Selectores de Hermano General

Seleccionan todos los hermanos de un elemento precedido por otro. Por ejemplo, h1 ~ p selecciona todos los párrafos precedidos por un <h1>.

h1 ~ p {
    color: gray;
}

9. Selectores de Grupo

Permiten aplicar el mismo estilo a múltiples elementos. Por ejemplo, h1, h2, h3 selecciona todos los <h1>, <h2>, y <h3>.

h1, h2, h3 {
    color: navy;
}

10. Selectores Pseudo-clase

Seleccionan elementos basados en su estado. Por ejemplo, a:hover selecciona un enlace cuando el puntero está sobre él.

a:hover {
    color: yellow;
}

11. Selectores Pseudo-elemento

Seleccionan una parte específica de un elemento. Por ejemplo, p::first-line selecciona la primera línea de un párrafo.

p::first-line {
    color: teal;
}