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.