Seletores básicos no CSS

1. Seletores por tipo (Type Selectors)

Seletores no CSS permitem escolher elementos HTML e aplicar estilos a eles. Saber os seletores básicos ajuda a escolher elementos na página de forma eficiente e precisa, tornando o CSS uma ferramenta poderosa para estilizar conteúdos web. Neste artigo, vamos explorar os principais tipos de seletores: seletores por tipo (Type Selectors), seletores por classe, seletores por identificador, seletores em grupo e seletores universais.

Seletores por tipo selecionam todos os elementos de uma determinada tag. Por exemplo, se precisamos aplicar estilos a todos os parágrafos na página, usamos o seletor por tipo com a tag <p>.

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

<p>Este texto será azul e terá tamanho de 16 pixels.</p>
<p>Segundo parágrafo com os mesmos estilos.</p>

Seletores por tipo são úteis quando você precisa aplicar estilos a todos os elementos de um determinado tipo, como todos os cabeçalhos ou parágrafos. Eles fornecem controle geral sobre a aparência de um grupo de elementos e simplificam a manutenção do site.

2. Seletores por classe (Class Selectors)

Seletores por classe permitem escolher elementos com um valor específico no atributo class. A classe é indicada pelo ponto (.) antes do nome da classe. Uma mesma classe pode ser usada em vários elementos, o que permite aplicar os mesmos estilos a diversos elementos.

.highlight {
  background-color: yellow;
  color: blue;
  font-weight: bold;
}

<p class="highlight">Este texto está destacado em azul com fundo amarelo.</p>
<p>Texto comum sem classe.</p>
<div class="highlight">Este bloco também será destacado com os estilos da classe highlight.</div>

Seletores por classe são universais e práticos, pois permitem criar estilos que podem ser aplicados a diferentes elementos. Classes são especialmente úteis quando você precisa estilizar um grupo de elementos não-relacionados.

3. Seletores por identificador (ID Selectors)

Seletores por identificador escolhem elementos com um valor específico no atributo id. O identificador é indicado pelo símbolo # antes do nome. Diferente das classes, o ID deve ser exclusivo na página, tornando-o ideal para estilizar elementos únicos, como o cabeçalho ou a barra de navegação.

#main-header {
  font-size: 24px;
  color: green;
  text-align: center;
}

<h1 id="main-header">Cabeçalho da página</h1>
<p>Este parágrafo não será afetado pelo seletor por identificador.</p>

Seletores por identificador aplicam estilos apenas a um elemento na página, por isso são usados para destacar elementos únicos com estilos específicos.

4. Seletores em grupo (Group Selectors)

Seletores em grupo permitem aplicar os mesmos estilos a vários elementos de uma só vez. Isso é feito com uma vírgula, que une vários seletores em uma única regra CSS. Seletores em grupo simplificam o código, pois permitem definir estilos comuns para vários tipos de elementos.

h1, h2, h3 {
  color: navy;
  font-family: Arial, sans-serif;
}

<h1>Cabeçalho de primeiro nível</h1>
<h2>Cabeçalho de segundo nível</h2>
<h3>Cabeçalho de terceiro nível</h3>
<p>Este texto não será estilizado pelo seletor em grupo.</p>

Seletores em grupo ajudam a reduzir o código CSS e simplificam a estilização, especialmente quando é necessário aplicar as mesmas propriedades a diferentes elementos, como cabeçalhos de diferentes níveis.

5. Seletores universais (Universal Selectors)

O seletor universal é indicado por um asterisco (*) e escolhe todos os elementos na página. É uma ferramenta poderosa que permite definir rapidamente estilos básicos para todos os elementos, como definir margens iguais ou especificar uma fonte padrão. O seletor universal é útil para "resetar" os estilos (reset), removendo margens e espaçamentos padrão dos navegadores para ter maior controle sobre os estilos.

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

<h1>Título</h1>
<p>Parágrafo de texto sem margens e sem espaçamentos.</p>
<div>Container sem margens e sem espaçamentos.</div>

Neste exemplo, o seletor universal reseta as margens e espaçamentos de todos os elementos, o que ajuda a manter a consistência dos estilos na página. Essa técnica é frequentemente utilizada no início do código CSS para criar uma estilização uniforme.