Selectores de grupo

Parte de la sección Estilos con CSS del Journey de HTML de Coddy. Lección 14 de 76.

El selector de grupo se utiliza para seleccionar varios elementos HTML y aplicarles los mismos estilos a todos. Esto resulta especialmente útil cuando quieres aplicar un conjunto común de estilos a distintos elementos sin tener que escribir reglas separadas 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 apunta 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, 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 aplicar estilos a estos elementos. Sigue los pasos a continuación:

Escribe una regla CSS usando un selector de grupo que seleccione todos los elementos <h1> y <h2>. Establece en rojo el color del texto de estos elementos.
Escribe una regla CSS usando un selector de grupo que seleccione todos los elementos <p> y el elemento <div>. Establece el color de fondo de estos elementos en lightgray y el tamaño de fuente en 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>