Seletores

Os seletores de elemento são os mais simples e gerais do CSS. Eles permitem aplicar estilos diretamente a todas as ocorrências de uma determinada tag HTML. Por exemplo, ao utilizar o seletor p { color: blue; }, todos os parágrafos (<p>) de uma página terão o texto exibido em azul. Essa abordagem é útil quando se deseja manter a consistência visual em elementos de mesmo tipo, porém não permite diferenciação individual entre eles.

Os seletores de classe oferecem maior flexibilidade, pois permitem aplicar estilos a grupos específicos de elementos sem se restringir ao tipo de tag. Eles são representados por um ponto (.) seguido do nome da classe, como em .destaque { font-weight: bold; }. Nesse caso, qualquer elemento HTML que possua o atributo class="destaque" será exibido em negrito, independentemente de ser um parágrafo, um título ou uma lista. O uso de classes favorece a reutilização de estilos e a criação de componentes visuais consistentes em diferentes partes do site.

Já os seletores de ID são utilizados para aplicar estilos exclusivos a um único elemento da página. Eles são representados pelo símbolo # seguido do nome do identificador, como em #principal { background-color: lightgray; }. Apenas o elemento com o atributo id="principal" receberá o estilo definido. Por convenção, os IDs devem ser únicos em cada documento HTML, o que significa que não se deve aplicar o mesmo ID a mais de um elemento. Esse seletor é particularmente útil quando é necessário destacar ou personalizar um elemento específico dentro do layout.

Básicos

Elemento → seleciona todas as ocorrências de uma tag.
```
p { color: blue; } /* todos os parágrafos */
```
Classe → seleciona elementos com determinada classe.
```
.destaque { font-weight: bold; }
```
ID → seleciona elemento único com determinado id.
```
#principal { background: lightgray; }
```
Universal → aplica a todos os elementos.
```
* { margin: 0; padding: 0; }
```

Combinadores

Descendente (espaço) → elementos dentro de outro.

div p { color: red; } /* todos <p> dentro de <div> */

Filho direto (>) → apenas filhos imediatos.
```
div > p { color: green; }
```
Adjacente (+) → próximo irmão imediato.
```
h1 + p { font-style: italic; }
```
Irmãos gerais (~) → todos os irmãos seguintes.
```
h1 ~ p { color: gray; }
```

Atributo

[atributo]
```
[title] { color: purple; }
```

[atributo="valor"]

[type="text"] { border: 1px solid black; }

[atributo^="valor"] → começa com
[atributo$="valor"] → termina com
[atributo*="valor"] → contém

Pseudo-classes

Estados ou condições especiais do elemento.

:hover → quando o mouse passa por cima.
:focus → quando o campo está ativo.
:first-child, :last-child → primeiro ou último filho.
:nth-child(2n) → elementos em posições específicas.
:checked → inputs selecionados.
:disabled, :enabled.

Exemplo:

a:hover { text-decoration: underline; }

Pseudo-elementos

Criam partes “virtuais” do elemento.

::before → conteúdo antes.
::after → conteúdo depois.
::first-letter → primeira letra.
::first-line → primeira linha.

p::first-letter { font-size: 200%; }

Seletores modernos (CSS4+)

:is() → simplifica múltiplos seletores.
```
:is(h1, h2, h3) { color: blue; }
```
:where() → igual ao :is(), mas sem peso de especificidade.
:has() → seleciona elemento pai com base em filho.
```
div:has(> img) { border: 2px solid red; }
```

O seletor :root é uma pseudo-classe que representa o elemento raiz do documento, que no caso do HTML é sempre o elemento <html>. Ele funciona de forma semelhante a usar diretamente o seletor html, mas com uma diferença importante: :root tem maior especificidade na cascata, o que significa que suas declarações têm mais peso do que as mesmas regras aplicadas em html.

O uso mais comum de :root é para definir variáveis CSS (custom properties) que podem ser reutilizadas em todo o documento. Por exemplo:

:root {
  --cor-principal: #1e66ff;
  --espacamento: 16px;
}

body {
  background-color: var(--cor-principal);
  margin: var(--espacamento);
}

Nesse exemplo, --cor-principal e --espacamento são variáveis criadas no escopo global (raiz) e podem ser chamadas em qualquer parte do CSS usando var(--nome-da-variavel). Isso facilita a manutenção, já que trocar uma cor ou medida em um só lugar atualiza todos os elementos que usam aquela variável.

Além das variáveis, :root também é útil quando queremos aplicar estilos globais que devem ter prioridade sobre regras aplicadas em html. Por exemplo, se você definir uma cor de fundo em html e outra em :root, o valor de :root prevalecerá por causa da especificidade maior.

Exemplo

<!DOCTYPE html>
<html lang="pt-br">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Exemplo :root e variáveis CSS</title>
  <style>
    /* Definição global das variáveis */
    :root {
      --cor-principal: #1e66ff;
      --cor-secundaria: #ff9800;
      --espacamento: 16px;
      --raio-borda: 8px;
    }

    body {
      font-family: Arial, sans-serif;
      background: #f9f9f9;
      margin: var(--espacamento);
    }

    h1 {
      color: var(--cor-principal);
    }

    .card {
      background: white;
      border-radius: var(--raio-borda);
      padding: var(--espacamento);
      margin-bottom: var(--espacamento);
      border: 2px solid var(--cor-principal);
    }

    /* Sobrescrevendo variáveis dentro de um contexto */
    .tema-alternativo {
      --cor-principal: #4caf50;   /* Verde */
      --cor-secundaria: #e91e63;  /* Rosa */
    }

    .tema-alternativo .card {
      border-color: var(--cor-principal);
    }

    .btn {
      background: var(--cor-secundaria);
      border: none;
      color: white;
      padding: 10px 20px;
      border-radius: var(--raio-borda);
      cursor: pointer;
    }
  </style>
</head>
<body>

  <h1>Exemplo com :root e variáveis CSS</h1>

  <div class="card">
    <p>Este card usa as variáveis globais definidas em <code>:root</code>.</p>
    <button class="btn">Botão Padrão</button>
  </div>

  <div class="tema-alternativo">
    <div class="card">
      <p>Este card está dentro de <code>.tema-alternativo</code>, que sobrescreveu as variáveis.</p>
      <button class="btn">Botão Alternativo</button>
    </div>
  </div>

</body>
</html>

PreviousCSS NextUnidades/Cores

Last updated 2 days ago