Seletores de Grupo

Parte da seção Styling with CSS do Journey de HTML da Coddy — lição 14 de 76.

O seletor de grupo é usado para selecionar múltiplos 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 ter que 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 tem como alvo todos os elementos <h1>, <h2> e <p>. As declarações definem a cor do texto como azul e o tamanho da fonte para 16 pixels para todos esses elementos.

Você pode agrupar qualquer tipo de seletores, 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 cabeçalhos (<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 "red".
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 "lightgray" e o tamanho da fonte como "18px".

Folha de consulta

O seletor de grupo permite aplicar os mesmos estilos a múltiplos elementos HTML separando os seletores com vírgulas (,):

selector1, selector2, selector3 {
    property: value;
}

Exemplo de agrupamento de seletores de elementos:

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

Você pode agrupar qualquer tipo de seletores (tipo, classe, ID):

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

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>