Seletores de Grupo

Parte da seção Estilização com CSS do Journey de HTML da Coddy. Lição 14 de 76.

O seletor de grupo é usado para selecionar vários elementos HTML e aplicar os mesmos estilos a todos eles. Isso é particularmente útil quando você deseja aplicar um conjunto comum de estilos a diferentes elementos sem precisar escrever regras separadas para cada elemento. Ao agrupar seletores, você pode escrever um código CSS mais conciso e eficiente.

Para usar um seletor de grupo, você lista os seletores que deseja agrupar, separados por vírgulas (,). Aqui está a sintaxe básica:

selector1, selector2, selector3 {
    property: value;
}

Por exemplo, digamos que você queira aplicar a mesma cor de texto e tamanho de fonte a todos os elementos <h1>, <h2> e <p>. Você pode usar um seletor de grupo como este:

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

Neste exemplo, o seletor de grupo visa a todos os elementos <h1>, <h2> e <p>. As declarações definem a cor do texto como azul e o tamanho da fonte como 16 pixels para todos esses elementos.

Você pode agrupar qualquer tipo de seletor, incluindo seletores de tipo, seletores de classe e seletores de ID:

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

Desafio

Fácil

Você recebeu um documento HTML com vários elementos, incluindo títulos (<h1>, <h2>), parágrafos (<p>) e uma divisão (<div>). Sua tarefa é usar um seletor de grupo para estilizar esses elementos. Siga as etapas abaixo:

Escreva uma regra CSS usando um seletor de grupo que tenha como alvo todos os elementos <h1> e <h2>. Defina a cor do texto desses elementos como vermelho.
Escreva uma regra CSS usando um seletor de grupo que tenha como alvo todos os elementos <p> e o elemento <div>. Defina a cor de fundo desses elementos como cinza-claro e o tamanho da fonte como 18 pixels.

Experimente você mesmo

<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>