Selectores en CSS

Los selectores en CSS son patrones utilizados para seleccionar los elementos de una página web que deseas estilizar. Existen diferentes tipos de selectores que te permiten aplicar estilos a diversos elementos de tu página.

Tipos de Selectores

1. Selector de tipo

El selector de tipo se utiliza para seleccionar todos los elementos de un tipo determinado. Por ejemplo, para seleccionar todos los <h1> de la página:

h1 {
    color: blue;
}
                

Este código cambia el color de todos los encabezados <h1> a azul.

2. Selector de clase

El selector de clase se usa para seleccionar todos los elementos que tengan una clase específica. La clase se representa con un punto antes del nombre de la clase:

.mi-clase {
    font-size: 16px;
}
                

Este selector aplicaría un tamaño de fuente de 16 píxeles a todos los elementos con la clase mi-clase.

3. Selector de ID

El selector de ID selecciona un único elemento con un identificador específico. El ID se representa con el símbolo de numeral (#) antes del nombre del ID:

#mi-id {
    background-color: yellow;
}
                

Este selector cambiará el color de fondo a amarillo para el elemento con el ID mi-id.

4. Selectores de atributo

Los selectores de atributo permiten seleccionar elementos según los atributos que contienen. Por ejemplo, para seleccionar todos los enlaces (<a>) que tienen un atributo href:

a[href] {
    color: red;
}
                

Este código aplicará color rojo a todos los enlaces que tengan un atributo href.

5. Selectores de pseudo-clase

Las pseudo-clases permiten seleccionar elementos con base en su estado. Por ejemplo, para seleccionar un enlace cuando el mouse está sobre él:

a:hover {
    text-decoration: underline;
}
                

Este código subraya todos los enlaces cuando el usuario pasa el mouse sobre ellos.

Ejemplo de Código Completo

Para ver cómo todo esto se aplica en un ejemplo real, aquí tienes un ejemplo de código con todos los selectores anteriores:

h1 {
    color: blue;
}
                
.mi-clase {
    font-size: 16px;
}
                
#mi-id {
    background-color: yellow;
}
                
a[href] {
    color: red;
}
                
a:hover {
    text-decoration: underline;
}
                

Este código combina todos los tipos de selectores descritos anteriormente.