Selectores de grupo

Parte de la sección Styling with CSS del Journey de HTML de Coddy — lección 14 de 76.

El selector de grupo se utiliza para seleccionar múltiples elementos HTML y aplicarles los mismos estilos a todos ellos. Esto es especialmente útil cuando deseas aplicar un conjunto común de estilos a diferentes elementos sin tener que escribir reglas separadas para cada uno. Al agrupar selectores, puedes escribir código CSS más conciso y eficiente.

Para usar un selector de grupo, se enumeran los selectores que se desean agrupar, separados por comas (,). Aquí está la sintaxis básica:

selector1, selector2, selector3 {
    property: value;
}

Por ejemplo, supongamos que quieres aplicar el mismo color de texto y tamaño de fuente a todos los elementos <h1>, <h2> y <p>. Puedes usar un selector de grupo como este:

h1, h2, p {
    color: blue;
    font-size: 16px;
}

En este ejemplo, el selector de grupo se aplica a todos los elementos <h1>, <h2> y <p>. Las declaraciones establecen el color del texto en azul y el tamaño de fuente en 16 píxeles para todos estos elementos.

Puedes agrupar cualquier tipo de selectores, incluyendo selectores de tipo, selectores de clase y selectores de ID:

h1, .highlight, #intro {
    background-color: yellow;
}

Desafío

Fácil

Se te proporciona un documento HTML con varios elementos, incluyendo encabezados (<h1>, <h2>), párrafos (<p>) y una división (<div>). Tu tarea es utilizar un selector de grupo para dar estilo a estos elementos. Sigue los pasos a continuación:

Escribe una regla CSS utilizando un selector de grupo que apunte a todos los elementos <h1> y <h2>. Establece el color de texto de estos elementos a red.
Escribe una regla CSS utilizando un selector de grupo que apunte a todos los elementos <p> y al elemento <div>. Establece el color de fondo de estos elementos a lightgray y el tamaño de fuente a 18 píxeles.

Hoja de referencia

El selector de grupo te permite aplicar los mismos estilos a múltiples elementos HTML separando los selectores con comas (,):

selector1, selector2, selector3 {
    property: value;
}

Ejemplo de agrupación de selectores de elementos:

h1, h2, p {
    color: blue;
    font-size: 16px;
}

Puedes agrupar cualquier tipo de selectores (tipo, clase, ID):

h1, .highlight, #intro {
    background-color: yellow;
}

Pruébalo tú mismo

<html>
<head>
    <title>Group Selectors</title>
    <style>
        /* Write CSS rules here */
    </style>
</head>
<body>
    <h1>This is a main heading</h1>
    <h2>This is a subheading</h2>
    <p>This is a paragraph.</p>
    <div>This is a division.</div>
</body>
</html>