Selectores en CSS (de Tipo, de Clase, de ID)

En CSS, los selectores se utilizan para seleccionar los elementos HTML a los que se aplicarán los estilos. Hay varios tipos de selectores, pero los más comunes son los selectores de tipo, de clase, y de ID.

Selector de Tipo

El selector de tipo selecciona todos los elementos HTML de un tipo específico, como <p>, <h1>, o <div>.

• Sintaxis:

elemento {
    propiedad: valor;
}

Ejemplo:

p {
    color: blue;
}

• • Esto aplicará el color azul a todo el texto de los elementos <p>.

Selector de Clase

El selector de clase selecciona todos los elementos HTML que tienen un atributo class específico. Este es uno de los métodos más flexibles para aplicar estilos a múltiples elementos.

• Sintaxis:

.nombre-de-clase {
    propiedad: valor;
}

Ejemplo:

.destacado {
    font-weight: bold;
}

• Esto aplicará negrita al texto de cualquier elemento con la clase destacado.

Aplicación en HTML:

Este es un párrafo destacado.

<p class="destacado">Este es un párrafo destacado.</p>

Selector de ID

El selector de ID selecciona un elemento único basado en su atributo id. Como cada id debe ser único dentro de una página HTML, este selector se usa para aplicar estilos a elementos específicos.

• Sintaxis:

#nombre-de-id {
    propiedad: valor;
}

Ejemplo:

#cabecera {
    background-color: #f4f4f4;
}

• Esto aplicará un fondo gris claro al elemento con el id cabecera.

Aplicación en HTML:

<header id="cabecera">Este es el encabezado del sitio.</header>

Diferencias Clave

• Selector de Tipo: Aplica estilos a todos los elementos del mismo tipo.
• Selector de Clase: Aplica estilos a cualquier elemento que tenga la clase especificada. Se puede usar en múltiples elementos.
• Selector de ID: Aplica estilos a un único elemento con el id especificado. Se debe usar solo una vez por página.

Estos selectores básicos son fundamentales para aplicar estilos en CSS y permiten una gran flexibilidad en el diseño y la estructura de un sitio web.