Frontend Academy · Aula

Seletores e a cascata

Selecione elementos com seletores de tipo, classe, ID e atributo. Entenda a especificidade, a herança e a cascata para prever quais estilos prevalecerão.

Seletores e a cascata é uma aula grátis de Frontend Academy no CoddyKit. Esta é a aula 1 de 4. Você pode ler a aula completa abaixo gratuitamente — depois pratica ao vivo no navegador com um editor de código integrado e um tutor de IA 24/7. Faz parte do caminho de aprendizado de Frontend Academy, e seu progresso é sincronizado entre a web e o app CoddyKit. O curso de Frontend Academy inclui 4 aulas no total.

O que é CSS?

CSS (folhas de estilo em cascata) é a linguagem que controla a apresentação visual. Você escreve regras — cada regra tem um seletor que direciona elementos e um bloco de declarações com pares de propriedade e valor.

selector {
  property: value;
  another-property: value;
}

Seletores de tipo, classe e ID

Os três seletores fundamentais: tipo direciona todos os elementos de uma tag (p), classe direciona elementos com uma classe (.card) e ID direciona um elemento pelo ID (#logo). Prefira classes — os seletores de ID têm especificidade muito alta.

p { color: #333; }        /* type */
.card { padding: 16px; }   /* class */
#logo { width: 200px; }    /* ID */

Seletores de atributo e pseudoclasse

Selecione pelo valor do atributo com [type="email"]. Use pseudoclasses para estados: :hover, :focus, :active, :checked, :nth-child(), :first-child, :last-child.

input[type="email"] { border-color: blue; }
a:hover { text-decoration: underline; }
li:nth-child(odd) { background: #f5f5f5; }

Combinadores

Os combinadores descrevem relações entre elementos: espaço (descendente), > (filho direto), + (irmão adjacente), ~ (irmão geral).

nav a { color: white; }        /* descendant */
nav > ul { list-style: none; }  /* child */
h2 + p { margin-top: 0; }       /* adjacent sibling */

Especificidade: quem vence?

Quando várias regras direcionam o mesmo elemento, a especificidade determina qual vence. Seletores de ID (0,1,0,0) superam seletores de classe (0,0,1,0), que superam seletores de tipo (0,0,0,1). Estilos inline superam todos. !important supera tudo — use-o como último recurso.

Calculando a especificidade

Conte os seletores de ID, de classe/atributo/pseudoclasse e de tipo separadamente. Compare coluna por coluna. Exemplo: #nav .link:hover = (0,1,1,1). .nav a = (0,0,1,1). O primeiro vence.

/* Specificity: 0,0,1,1 — loses */
.nav a { color: red; }

/* Specificity: 0,1,1,1 — wins */
#nav .link:hover { color: blue; }

A cascata: a ordem importa

Quando a especificidade é igual, vence a regra que aparece mais tarde na folha de estilos. Esse é o C de CSS — a cascata. Tanto a ordem de importação quanto a ordem no código-fonte são importantes.

Herança

Algumas propriedades de CSS são herdadas por padrão — os elementos filhos recebem o valor do elemento pai sem que você precise defini-lo. Propriedades relacionadas a texto, como color, font-family e line-height, são herdadas. Propriedades do modelo de caixa, como margin, não são.

body {
  font-family: 'Inter', sans-serif; /* all text inherits this */
  color: #1a202c;                   /* all text inherits this */
}

Os seletores :is() e :where()

:is() e :where() permitem escrever seletores concisos que correspondem a qualquer item de uma lista. A diferença: :is() herda a maior especificidade de seus argumentos; :where() sempre tem especificidade zero.

/* Instead of h1 a, h2 a, h3 a: */
:is(h1, h2, h3) a {
  color: inherit;
}

O seletor universal *

O seletor universal * corresponde a todos os elementos. Ele é usado com frequência em redefinições de CSS: *, *::before, *::after { box-sizing: border-box; }, o que torna o modelo de caixa muito mais previsível.

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

Estilos padrão do navegador

Os navegadores aplicam sua própria folha de estilos padrão (a folha de estilos do agente do usuário) antes da sua. Redefinições de CSS, como normalize.css, ou camadas de CSS neutralizam esses padrões para que sua estilização comece a partir de uma base conhecida.

Verificação rápida

Qual seletor tem a maior especificidade?

Recapitulação: seletores e a cascata

Direcione elementos com seletores de tipo, classe, ID, atributo e pseudoclasse. A especificidade resolve conflitos (ID > classes > tipos). A cascata desempata usando a ordem no código-fonte. A herança propaga estilos de texto automaticamente aos descendentes.

Perguntas Frequentes

A aula “Seletores e a cascata” é grátis?

Sim — o texto completo de “Seletores e a cascata” é grátis para ler aqui na web. Para praticá-la interativamente (um editor de código integrado e um tutor de IA 24/7) e desbloquear o restante do curso de Frontend Academy, atualize para CoddyKit PRO. O curso de Frontend Academy inclui 4 aulas no total.

O que vou aprender em “Seletores e a cascata”?

Selecione elementos com seletores de tipo, classe, ID e atributo. Entenda a especificidade, a herança e a cascata para prever quais estilos prevalecerão. Você pratica Frontend Academy com código prático que executa diretamente no navegador, e um tutor de IA 24/7 responde suas dúvidas enquanto trabalha na aula.

Preciso ter experiência prévia para começar Frontend Academy?

Nenhuma experiência prévia é necessária. Frontend Academy no CoddyKit é estruturado para alunos iniciantes até avançados, então você pode começar aqui ou desde o início e aprender no seu ritmo. Esta é a aula 1 de 4.

Quanto tempo leva a aula “Seletores e a cascata”?

A maioria das aulas CoddyKit leva cerca de 5–10 minutos. Cada uma é compacta e interativa, então você faz progresso constante e retoma exatamente de onde parou entre web e app.

Posso escrever e executar código nesta aula de Frontend Academy?

Sim. Cada aula de Frontend Academy inclui um editor de código integrado, então você escreve e executa código real direto no navegador e recebe feedback de IA instantaneamente — nenhuma configuração local necessária.

Todas as aulas deste curso

← Voltar para Frontend Academy