🎯 Seletores Compartilhados CSS

Introdução

Seletores compartilhados permitem aplicar o mesmo conjunto de estilos para diferentes elementos HTML utilizando uma única regra CSS.

Essa técnica evita repetição de código e facilita a manutenção dos projetos.

O que são Seletores Compartilhados?

São seletores agrupados que recebem as mesmas propriedades CSS.

h1,
h2,
h3 {

color:blue;

}

Todos os títulos receberão o mesmo estilo.

Sem Compartilhamento

Um código repetitivo:

h1 {

color:red;

}


h2 {

color:red;

}


h3 {

color:red;

}

O mesmo código aparece várias vezes.

Com Seletor Compartilhado

h1,
h2,
h3 {

color:red;

}

Uma única regra controla vários elementos.

Sintaxe do Agrupamento

seletor1,
seletor2,
seletor3 {

 propriedade: valor;

}

Os seletores são separados por vírgula.

Exemplo com Tags HTML

h1,
p,
a {

font-family:Arial;

}

Aplica a mesma fonte para títulos, textos e links.

Compartilhando Classes

Classes também podem compartilhar estilos.

.botao,
.link {

padding:10px;

border-radius:5px;

}

Classes Diferentes com Mesmo Estilo

HTML


<button class="botao">

Salvar

</button>



<a class="link">

Acessar

</a>



CSS


.botao,
.link {

background:blue;

color:white;

}

Combinação de Seletores

Podemos combinar diferentes tipos de seletores.

h1,
.titulo,
#principal {

font-weight:bold;

}

Elementos, classes e IDs podem participar do agrupamento.

Seletores Compartilhados com Pseudo-Classes

a:hover,
button:hover {

opacity:0.8;

}

Aplica o mesmo comportamento quando o usuário passa o mouse.

Aplicação em Componentes

Benefícios

Exemplo Profissional

.titulo,
.subtitulo,
.descricao {

font-family:Arial;

color:#333;

}

Componentes diferentes podem seguir o mesmo padrão visual.

Cuidados

• Não agrupar elementos sem relação.
• Evitar regras muito genéricas.
• Manter organização do CSS.
• Utilizar nomes semânticos.

Erros Comuns

Resumo Final