Seletores CSS

Seletores CSS são como endereços para aplicar estilos. Quanto mais específicos, maior a prioridade. A cascata define qual estilo prevalece, seguindo a hierarquia de especificidade.

Introdução

Quando você quer decorar sua casa, você pode escolher diferentes móveis para diferentes cômodos, certo? No CSS, você faz algo parecido: escolhe quais partes do seu site (ou "cômodos") quer decorar, e depois aplica as cores, tamanhos, e estilos que deseja. Essa escolha de quais partes você quer estilizar é feita com seletores.

O que são seletores?

Seletores CSS são como endereços que você usa para dizer ao navegador onde aplicar as decorações (os estilos). Dependendo de quão específico você é com o endereço, o navegador vai decidir qual estilo aplicar primeiro se houver conflitos.

Tipos Comuns

Seletores de Elemento (Tag):
- Exemplo: Quando você quer estilizar todos os parágrafos () da sua página, você usa um seletor de elemento.
- Como Usar:
 p { color: blue; }
 - O que faz?: Todos os parágrafos  ficarão com o texto azul.
Seletores de Classe:
- Exemplo: Imagine que você quer estilizar apenas alguns parágrafos de forma diferente. Você pode dar uma "classe" a esses parágrafos.
- Como Usar:
 .alerta { color: red; }
 Este parágrafo é um alerta e ficará vermelho.
 - O que faz?: Apenas os parágrafos com a classe alerta ficarão vermelhos.
Seletores de ID:
- Exemplo: Quando você tem um parágrafo único que precisa de um estilo especial, você pode dar a ele um "ID".
- Como Usar:
 #principal { font-size: 20px; }
 Este é o parágrafo principal e terá fonte maior.
 - O que faz?: Apenas o parágrafo com o ID principal terá o texto maior.
Seletores Descendentes:
- Exemplo: Quando você quer estilizar parágrafos que estão dentro de uma div específica.
- Como Usar:
 div p { color: green; }
 <div> Este parágrafo dentro da `div` ficará verde. </div>
 - O que faz?: Apenas os parágrafos que estão dentro de uma div ficarão verdes.

Especificidade: Quanto Mais Específico, Maior a Prioridade

No CSS, quanto mais específico o seletor, maior a chance de ele "vencer" na aplicação dos estilos, se houver conflito entre diferentes seletores. Pense nisso como dar mais detalhes no endereço:

Exemplo de Especificidade:

p { color: blue; } /* Menos específico */
.alerta { color: red; } /* Mais específico */
#principal { color: green; } /* Muito específico */

Se um parágrafo tiver o ID principal e a classe alerta, o texto ficará verde, porque o ID #principal é mais específico do que a classe .alerta.

Hierarquia e Cascata

CSS significa "Cascading Style Sheets" (Folhas de Estilo em Cascata). "Cascata" significa que os estilos são aplicados de cima para baixo, como se estivessem caindo em cascata. Quando o navegador vê várias regras aplicadas ao mesmo elemento, ele segue algumas regras para decidir qual aplicar:

Estilos Inline:
- Estes são aplicados diretamente no HTML e têm a maior prioridade.
- Exemplo:
 Texto laranja
Estilos por ID:
- Têm prioridade alta.
- Exemplo:
  #principal { color: green; }
Estilos por Classe e Pseudo-Classes:
- Têm prioridade média.
- Exemplo:
  .alerta { color: red; }
Estilos por Elemento (Tag):
- Têm a menor prioridade.
- Exemplo:
  p { color: blue; }

Cascata na Prática

Vamos supor que você tenha o seguinte HTML e CSS:

<html>
<head>
    <style>
        p { color: blue; } /* 1. Menos específico */
        .alerta { color: red; } /* 2. Mais específico */
        #principal { color: green; } /* 3. Muito específico */
    </style>
</head>
<body>
    <p id="principal" class="alerta">Este texto será verde.</p>
</body>
</html>

Resultado: O texto ficará verde, porque o ID #principal tem mais "força" (especificidade) do que a classe .alerta ou a tag p.

Conclusão

Seletores: São como endereços para dizer ao navegador onde aplicar os estilos. Quanto mais específico o endereço, mais prioridade ele terá.
Cascata: Quando várias regras se aplicam ao mesmo elemento, o CSS decide qual usar com base na especificidade e na ordem em que as regras são escritas.

Entender como os seletores e a cascata funcionam é fundamental para criar estilos que se comportam da maneira que você espera em seu site.

AnteriorTag/Propriedade style + Tag Link para CSS PróximoComentários em CSS

Atualizado há 7 meses

Isto foi útil?