Selectores de grupo

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

El group selector (selector de grupo) se usa para seleccionar múltiples elementos HTML y aplicar 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 independientes para cada elemento. Al agrupar selectores, puedes escribir código CSS más conciso y eficiente.

Para usar un selector de grupo, listas los selectores que quieres 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 blue y el tamaño de font en 16 píxeles para todos estos elementos.

Puedes agrupar cualquier tipo de selectores, incluidos 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, incluidos encabezados (<h1>, <h2>), párrafos (<p>) y una división (<div>). Tu tarea es usar un selector de grupo para dar estilo a estos elementos. Sigue los siguientes pasos:

Escribe una regla CSS utilizando un selector de grupo que se dirija a todos los elementos <h1> y <h2>. Establece el color del texto de estos elementos a red.
Escribe una regla CSS utilizando un selector de grupo que se dirija 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.

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>