Seletores e Especificidade

Aula 1 de 7

Seletores CSS

Seletores definem quais elementos HTML serão estilizados.

Seletores Básicos

/* Elemento */
article { line-height: 1.6; }

/* Classe */
.card { border-radius: 8px; }

/* ID */
#cabecalho { position: sticky; }

/* Atributo */
input[type="email"] { border-color: blue; }
a[href^="https"] { color: green; }
img[alt] { border: 2px solid gold; }

Pseudo-classes

/* :nth-child - padrões complexos */
li:nth-child(odd) { background: #f5f5f5; }
li:nth-child(3n+1) { color: #e74c3c; }
li:nth-last-child(2) { font-weight: bold; }

/* :has - elemento que contém algo (CSS moderno) */
.card:has(img) { padding: 0; }
section:has(h2) { margin-top: 2rem; }
form:has(input:invalid) button { opacity: 0.5; }

/* :is e :where - agrupamento com diferença de especificidade */
:is(h1, h2, h3) { font-weight: 700; }        /* especificidade = h1 */
:where(header, footer) p { color: #666; }     /* especificidade zero */

/* Interação */
button:hover { transform: scale(1.02); }
input:focus { outline: 2px solid #3498db; }
a:visited { color: purple; }

Pseudo-elementos

/* ::before e ::after para decoração */
.card::before {
  content: "★";
  color: gold;
  margin-right: 4px;
}

.tooltip[data-tooltip]::after {
  content: attr(data-tooltip);
  position: absolute;
  background: #333;
  color: #fff;
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 0.75rem;
  white-space: nowrap;
}

/* ::first-letter e ::first-line */
p::first-letter {
  font-size: 2em;
  font-weight: bold;
  float: left;
}

::selection {
  background: #3498db;
  color: white;
}

/* ::placeholder */
input::placeholder {
  color: #999;
  font-style: italic;
}

Especificidade e Cascata

Cálculo de Especificidade

/* Especificidade: (0,0,1,0) = 010 */
.classe { color: blue; }

/* Especificidade: (0,1,0,0) = 100 */
#id { color: red; }

/* Especificidade: (0,0,1,1) = 011 */
div.classe { color: green; }

/* Especificidade: (1,0,0,0) = 1000 */
style="color: orange;"

/* !important sobrescreve tudo (evitar!) */
.classe { color: purple !important; }

Unidades CSS

/* Absolutas */
.box { width: 300px; }

/* Relativas ao font-size do elemento/root */
p { font-size: 1.2em; }      /* 1.2x do elemento pai */
h1 { font-size: 2rem; }      /* 2x do font-size root (16px = 32px) */

/* Relativas ao viewport */
.hero { height: 100vh; }
.section { width: 80vw; }

/* Relativas ao tamanho do conteúdo */
.fit-content { width: fit-content; }
.min-content { width: min-content; }
.max-content { width: max-content; }

/* Unidade ch para largura de caracteres */
.code-block { max-width: 80ch; }

<!DOCTYPE html>
<html lang="pt-BR">
<head>
  <style>
    /* Exemplo de cascata */
    p { color: black; }           /* 001 */
    .texto { color: blue; }      /* 010 - vence */
    #especial { color: green; }  /* 100 - venceria se aplicado */
  </style>
</head>
<body>
  <p class="texto">Este texto será azul (classe vence elemento).</p>
</body>
</html>

Lab: Especificidade Analyzer

Crie uma página com múltiplos seletores concorrentes. Use o DevTools para inspecionar qual regra vence e por quê.

# Verificar especificidade via CLI (npm)
npx specificity-calculator "div.container#main p.texto.highlight" "div p"

Entender especificidade é dominar CSS. Regras claras evitam o caos de !important.