Agrupamento de seletores

Roger.Santos 03/01/2023

Módulo Progresso

0% Concluído

Nós também podemos aplicar o mesmo estilo para varios seletores, neste caso basta separar eles por ,.

/* aplica em todos os elementos div */
div { ... }

/* aplica em todos os elementos div e p */
div, p { ... }

/* aplica em todos os elementos div e p e também a todas as classes minha-classe */
div, p, .minha-classe { ... }

/* aplica em todos os elementos p dentro de div e também a todas as classes minha-classe */
div p, .minha-classe { ... }

além disso podemos combinar seletores do tipo elemento e classe declarando eles juntos no CSS como nesse exemplo

/* aplica em todos os elementos p que tiverem a classes minha-classe declarada */
p.minha-classe { ... }

é importante termos CSS específicos pois em caso de um conflito o mais especifico será aplicado, mas o ideal é você começar com seletores genéricos e ir especificando conforme sentir necessidade.

Exercício 1: Estilizando Elementos Genéricos e Classes

Dado o o seguinte HTML:

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" type="text/css" href="estilos.css">
</head>
<body>
    <div>
        <p>Este é um parágrafo dentro de uma div.</p>
    </div>
    <p class="minha-classe">Este é um parágrafo com a classe "minha-classe".</p>
    <h1>Este é um título h1.</h1>
</body>
</html>

Crie regras CSS para estilizar elementos genéricos. Eles devem:

Aplicar um plano de fundo amarelo (#FFFF00) a todos os elementos <div>.
Definir a cor do texto de todos os elementos <p> como vermelho (#FF0000).

Utilize os seletores de agrupamento para alcançar esse resultado.

Exercício 2: Estilizando Elementos Específicos

Dado o o seguinte HTML:

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" type="text/css" href="estilos.css">
</head>
<body>
    <div>
        <p>Este é um parágrafo dentro de uma div.</p>
    </div>
    <p class="minha-classe">Este é um parágrafo com a classe "minha-classe".</p>
    <h1 class="minha-classe">Este é um título h1 com a classe "minha-classe".</h1>
</body>
</html>

Crie regras CSS para estilizar elementos de classe específicos. Eles devem:

Aplicar um plano de fundo azul (#0000FF) a todos os elementos com a classe “minha-classe”.
Definir a cor do texto de todos os elementos <h1> com a classe “minha-classe” como verde (#008000).

Utilize seletores de agrupamento e seletores de classe para atingir esse resultado, garantindo que apenas os elementos com a classe “minha-classe” sejam estilizados.

Curso de CSS 3

Participantes 867

Agrupamento de seletores

Roger.Santos 03/01/2023

Exercício 1: Estilizando Elementos Genéricos e Classes

Exercício 2: Estilizando Elementos Específicos