🎯 Aula 2: Seletores e Especificidade

🎯 Objetivos de Aprendizagem

🔍 Seletores Avançados

Dominar seletores de atributo, pseudo-classes e pseudo-elementos

🔗 Combinadores

Usar descendente, filho, irmão adjacente e irmão geral

⚖️ Especificidade

Entender como o CSS resolve conflitos entre regras

🚀 Seleção Eficiente

Escrever seletores performáticos e semânticos

🔍 Tipos de Seletores CSS

1. 🏷️ Seletores de Atributo

Selecionam elementos baseados nos seus atributos:

Seletores de Atributo

/* Elementos com atributo específico */
[href] { color: blue; }

/* Valor exato do atributo */
[type="button"] { background: #007bff; }

/* Contém valor específico */
[class*="btn"] { padding: 10px; }

/* Começa com valor específico */
[href^="https"] { color: green; }

/* Termina com valor específico */
[href$=".pdf"] { color: red; }

2. 🎭 Pseudo-classes

Selecionam estados específicos dos elementos:

Pseudo-classes de Estado

/* Estados de link */
a:link { color: blue; }
a:visited { color: purple; }
a:hover { color: red; }
a:active { color: orange; }

/* Estados de formulário */
input:focus { border: 2px solid #007bff; }
input:disabled { background: #f5f5f5; }
input:checked { transform: scale(1.1); }

/* Estruturais */
p:first-child { margin-top: 0; }
p:last-child { margin-bottom: 0; }
li:nth-child(odd) { background: #f9f9f9; }

3. 🎨 Pseudo-elementos

Criam elementos virtuais para estilização:

Pseudo-elementos Úteis

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

/* Conteúdo antes e depois */
.icone::before {
    content: "🎯 ";
    color: #007bff;
}

.link-externo::after {
    content: " ↗";
    font-size: 0.8em;
}

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

🔗 Combinadores CSS

👥 Descendente (espaço)

/* Todos os p dentro de div */
div p {
    color: #333;
}

Seleciona todos os descendentes

👶 Filho Direto (>)

/* Apenas p filhos diretos */
div > p {
                    font-weight: bold;
}

Seleciona apenas filhos diretos

🤝 Irmão Adjacente (+)

/* p imediatamente após h2 */
h2 + p {
    font-size: 1.1em;
}

Seleciona o próximo irmão

👫 Irmãos Gerais (~)

/* Todos os p após h2 */
h2 ~ p {
    margin-left: 20px;
}

Seleciona todos os irmãos seguintes

🎯 Exemplo Prático: Estrutura de Artigo

HTML de Exemplo

<article>
    <h1>Título do Artigo</h1>
    <p>Primeiro parágrafo (introdução)</p>
    <h2>Seção 1</h2>
    <p>Primeiro parágrafo da seção</p>
    <p>Segundo parágrafo da seção</p>
    <h2>Seção 2</h2>
    <p>Outro parágrafo</p>
</article>

CSS com Combinadores

/* Todos os parágrafos do artigo */
article p {
    color: #555;
    line-height: 1.6;
}

/* Apenas h1 filho direto do article */
article > h1 {
    color: #2c3e50;
    border-bottom: 3px solid #3498db;
}

/* Primeiro parágrafo após cada h2 */
h2 + p {
    font-weight: 600;
    color: #2c3e50;
}

/* Todos os parágrafos seguintes aos h2 */
h2 ~ p {
    margin-left: 15px;
}

⚖️ Especificidade CSS

A especificidade determina qual regra CSS será aplicada quando múltiplas regras conflitantes afetam o mesmo elemento.

📊 Sistema de Pontuação

CSS usa um sistema de 4 dígitos (0,0,0,0) para calcular especificidade:

1º dígito: Estilos inline (style="")
2º dígito: IDs (#)
3º dígito: Classes (.), atributos ([]), pseudo-classes (:)
4º dígito: Elementos (div, p) e pseudo-elementos (::)

Seletor	Especificidade	Explicação
`p`	0,0,0,1	1 elemento
`.classe`	0,0,1,0	1 classe
`#id`	0,1,0,0	1 ID
`div.classe`	0,0,1,1	1 classe + 1 elemento
`#id .classe p`	0,1,1,1	1 ID + 1 classe + 1 elemento
`style=""`	1,0,0,0	CSS inline

🏆 Ordem de Prioridade

1. 🚨 !important

Força máxima prioridade (use com parcimônia!)

2. 📝 CSS Inline

Especificidade 1,0,0,0

3. 🆔 IDs

Especificidade 0,1,0,0

4. 🎯 Classes, Atributos, Pseudo-classes

Especificidade 0,0,1,0

5. 🏷️ Elementos e Pseudo-elementos

Especificidade 0,0,0,1

6. ⭐ Universal (*)

Especificidade 0,0,0,0

💻 Exercício Prático

🎯 Testando Seletores e Especificidade

📄 1. HTML de Teste

<div class="container">
    <header id="cabecalho">
        <h1 class="titulo">Meu Site</h1>
        <nav>
            <a href="#" class="link ativo">Home</a>
            <a href="#" class="link">Sobre</a>
            <a href="contato.html" class="link externo">Contato</a>
        </nav>
    </header>
    
    <main>
        <article>
            <h2>Primeiro Artigo</h2>
            <p class="introducao">Esta é a introdução...</p>
            <p>Este é o conteúdo principal...</p>
            <p>Mais conteúdo aqui...</p>
        </article>
    </main>
</div>

🎨 2. CSS com Diferentes Seletores

/* Reset básico */
* { margin: 0; padding: 0; box-sizing: border-box; }

/* Seletores de elemento */
body { font-family: Arial, sans-serif; }
h1, h2 { color: #2c3e50; }

/* Seletores de classe */
.container { max-width: 1200px; margin: 0 auto; }
.titulo { font-size: 2.5em; }
.link { 
    text-decoration: none; 
    padding: 10px 15px;
    margin: 0 5px;
}

/* Seletores de ID */
#cabecalho { 
    background: #34495e;
    color: white;
    padding: 20px;
}

/* Pseudo-classes */
.link:hover { background: #3498db; }
.link.ativo { 
    background: #e74c3c; 
    font-weight: bold;
}

/* Seletores de atributo */
[href$=".html"] { color: #e67e22; }

/* Combinadores */
header nav { display: flex; }
h2 + p { font-weight: 600; }
article > p { margin-bottom: 15px; }
.introducao ~ p { color: #7f8c8d; }

/* Pseudo-elementos */
.externo::after { 
    content: " 🔗"; 
    font-size: 0.8em;
}

✅ Tarefas do Exercício

Criar HTML com a estrutura fornecida Aplicar todos os estilos CSS Testar hover nos links Identificar diferentes especificidades Experimentar com !important Adicionar seus próprios seletores

🚀 Dicas Avançadas

⚡ Performance

Evite seletores muito específicos
CSS lê da direita para esquerda
Use classes em vez de elementos
Evite seletores universais

🧹 Código Limpo

Prefira especificidade baixa
Evite !important
Use nomes semânticos
Organize por especificidade

📱 Responsive

Use :not() para exclusões
Pseudo-classes estruturais
Seletores de atributo para estados
Combinadores para layouts

🔍 Debug

DevTools mostra especificidade
Use outline para visualizar
Teste seletores no console
Valide CSS regularmente

🏆 Desafio: Sistema de Cards

🎨 Crie um Sistema de Cards Inteligente

Usando apenas seletores CSS, crie cards que:

Mudem cor no hover
Tenham estados para "novo", "favorito" e "arquivado"
O primeiro e último card tenham estilos especiais
Cards pares e ímpares tenham cores alternadas
Links externos mostrem ícone automático

HTML Sugerido

<div class="cards-container">
    <div class="card novo">
        <h3>Card Novo</h3>
        <p>Conteúdo do card...</p>
        <a href="https://exemplo.com">Link Externo</a>
    </div>
    <!-- Mais cards... -->
</div>