escola.all.dev.brEscola de Programação

Fundamentos da Web com HTML e CSS

0/24 aulas0%
pratica

Seletores CSS: Tipo, Classe, ID e Atributos

Aprenda sobre seletores css: tipo, classe, id e atributos

30 min
Aula 2 de 6

Seletores CSS: Tipo, Classe, ID e Atributos

Olá, futuros mestres do estilo! 👋 Nesta aula prática, vamos mergulhar no coração do CSS: os seletores. Eles são a chave para aplicar estilos específicos aos elementos certos na sua página web. Sem seletores, o CSS seria apenas uma bagunça sem direção!

Vamos entender como usar seletores de Tipo, Classe, ID e Atributos para dar vida aos seus designs. 🎯

🚀 1. Introdução: O que são Seletores CSS?

Imagine que sua página HTML é uma grande loja com muitos produtos (elementos). Os seletores CSS são como os "endereços" ou "etiquetas" que você usa para encontrar um produto específico (ou um grupo de produtos) e aplicar uma mudança de cor, tamanho ou qualquer outro estilo.

Eles nos permitem selecionar um ou mais elementos HTML para aplicar regras de estilo. Nesta aula, focaremos nos seletores mais fundamentais e amplamente utilizados.

✨ 2. Explicação Detalhada com Exemplos

Vamos explorar cada tipo de seletor com exemplos práticos.

2.1. Seletor de Tipo (ou Elemento)

O seletor de tipo é o mais básico. Ele seleciona todos os elementos de um determinado tipo (tag HTML).

  • Sintaxe: nome-da-tag { propriedades: valor; }
  • Quando usar: Para aplicar estilos gerais a todos os elementos de um tipo específico, como todos os parágrafos (<p>), todos os títulos (<h1>), ou todas as listas (<ul>).

Exemplo Oficial (Baseado em MDN):

<!-- index.html -->
<!DOCTYPE html>
<html lang="pt-br">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Seletores de Tipo</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <h1>Meu Título Principal</h1>
    <p>Este é um parágrafo de exemplo.</p>
    <p>Este é outro parágrafo, também será estilizado.</p>
    <ul>
        <li>Item da lista 1</li>
        <li>Item da lista 2</li>
    </ul>
</body>
</html>
/* style.css */
h1 {
    color: #2c3e50; /* Azul escuro */
    font-family: 'Arial', sans-serif;
    text-align: center;
}
 
p {
    color: #34495e; /* Cinza escuro */
    font-size: 1.1em;
    line-height: 1.6;
}
 
ul {
    list-style-type: square; /* Marcador quadrado */
    background-color: #ecf0f1; /* Cinza claro */
    padding: 15px;
    border-radius: 5px;
}

2.2. Seletor de Classe

O seletor de classe é super flexível e um dos mais usados. Ele seleciona todos os elementos que possuem um atributo class com um valor específico. Vários elementos podem ter a mesma classe, e um elemento pode ter várias classes.

  • Sintaxe: .nome-da-classe { propriedades: valor; }
  • Quando usar: Para aplicar estilos a um grupo de elementos que compartilham uma característica visual ou funcional, independentemente de seu tipo de tag.

Exemplo Oficial (Baseado em MDN):

<!-- index.html -->
<!DOCTYPE html>
<html lang="pt-br">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Seletores de Classe</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <h1 class="titulo-principal">Bem-vindo ao Meu Site</h1>
    <p class="destaque">Este parágrafo é importante e precisa de destaque!</p>
    <p>Este é um parágrafo normal.</p>
    <div class="card">
        <h3>Título do Card</h3>
        <p class="destaque">Conteúdo relevante no card.</p>
    </div>
</body>
</html>
/* style.css */
.titulo-principal {
    color: #e74c3c; /* Vermelho vibrante */
    text-shadow: 2px 2px 4px rgba(0,0,0,0.2);
}
 
.destaque {
    font-weight: bold;
    background-color: #f1c40f; /* Amarelo */
    padding: 5px 10px;
    border-radius: 3px;
    display: inline-block; /* Para o background não ocupar a linha toda */
}
 
.card {
    border: 1px solid #bdc3c7;
    padding: 20px;
    margin-top: 20px;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}

2.3. Seletor de ID

O seletor de ID é usado para selecionar um único elemento com um atributo id específico. O valor do id deve ser único em toda a página HTML.

  • Sintaxe: #nome-do-id { propriedades: valor; }
  • Quando usar: Para aplicar estilos a um elemento específico e único na página, como um cabeçalho principal, um rodapé ou uma seção de navegação.

Exemplo Oficial (Baseado em MDN):

<!-- index.html -->
<!DOCTYPE html>
<html lang="pt-br">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Seletores de ID</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <header id="cabecalho-principal">
        <h1>Meu Blog Incrível</h1>
        <nav>
            <a href="#">Home</a>
            <a href="#">Sobre</a>
            <a href="#">Contato</a>
        </nav>
    </header>
 
    <main>
        <section id="artigo-destaque">
            <h2>Artigo Mais Lido</h2>
            <p>Este é o conteúdo do artigo em destaque.</p>
        </section>
        <section>
            <h2>Outro Artigo</h2>
            <p>Conteúdo de outro artigo.</p>
        </section>
    </main>
 
    <footer id="rodape">
        <p>&copy; 2023 Meu Blog. Todos os direitos reservados.</p>
    </footer>
</body>
</html>
/* style.css */
#cabecalho-principal {
    background-color: #2c3e50;
    color: white;
    padding: 20px;
    text-align: center;
}
 
#cabecalho-principal h1 {
    margin-bottom: 10px;
}
 
#cabecalho-principal nav a {
    color: #ecf0f1;
    text-decoration: none;
    margin: 0 10px;
    font-weight: bold;
}
 
#artigo-destaque {
    background-color: #f9f9f9;
    border-left: 5px solid #3498db; /* Borda azul */
    padding: 20px;
    margin: 20px 0;
}
 
#rodape {
    background-color: #34495e;
    color: #bdc3c7;
    text-align: center;
    padding: 15px;
    margin-top: 30px;
}

2.4. Seletor de Atributo

O seletor de atributo seleciona elementos com base na presença ou no valor de um atributo HTML. É muito útil para estilizar elementos como links (<a>), inputs (<input>) ou qualquer elemento com atributos personalizados.

Existem várias variações:

  • [atributo] : Seleciona elementos que possuem o atributo especificado (qualquer valor).
  • [atributo="valor"] : Seleciona elementos onde o atributo tem exatamente o valor especificado.
  • [atributo~="valor"] : Seleciona elementos onde o atributo contém uma lista de palavras separadas por espaço, e uma delas é o valor especificado.
  • [atributo^="valor"] : Seleciona elementos onde o atributo começa com o valor especificado.
  • [atributo$="valor"] : Seleciona elementos onde o atributo termina com o valor especificado.
  • [atributo*="valor"] : Seleciona elementos onde o atributo contém o valor especificado em qualquer lugar.

Exemplo Oficial (Baseado em MDN):

<!-- index.html -->
<!DOCTYPE html>
<html lang="pt-br">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Seletores de Atributo</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <h1>Seletores de Atributo em Ação</h1>
 
    <a href="https://www.google.com" target="_blank">Visitar Google</a>
    <a href="/sobre.html">Sobre Nós</a>
    <a href="mailto:contato@exemplo.com">Enviar E-mail</a>
    <a href="https://developer.mozilla.org">MDN Web Docs</a>
 
    <input type="text" placeholder="Seu nome">
    <input type="password" placeholder="Sua senha">
    <input type="submit" value="Enviar">
    <input type="checkbox" checked> Lembrar-me
    <input type="radio" name="opcao" value="sim"> Sim
    <input type="radio" name="opcao" value="nao"> Não
 
    <div data-info="importante">Este é um div com atributo `data-info`.</div>
    <div data-tipo="aviso-geral">Este é um div de aviso.</div>
    <div data-tipo="aviso-critico">Este é um div de aviso crítico.</div>
</body>
</html>
/* style.css */
/* Seleciona todos os links com o atributo 'target' */
a[target] {
    border-bottom: 1px dotted #3498db;
    text-decoration: none;
    color: #2980b9;
}
 
/* Seleciona links que começam com 'https://' */
a[href^="https://"] {
    color: #27ae60; /* Verde */
    font-weight: bold;
}
 
/* Seleciona links que terminam com '.com' */
a[href$=".com"] {
    background-color: #e8f6f3;
    padding: 2px 5px;
    border-radius: 3px;
}
 
/* Seleciona links que contêm 'mailto' */
a[href*="mailto"] {
    font-style: italic;
    color: #8e44ad; /* Roxo */
}
 
/* Seleciona inputs de texto */
input[type="text"] {
    border: 1px solid #ccc;
    padding: 8px;
    border-radius: 4px;
    width: 200px;
    margin-bottom: 10px;
}
 
/* Seleciona inputs de submit */
input[type="submit"] {
    background-color: #2ecc71; /* Verde claro */
    color: white;
    padding: 10px 15px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.3s ease;
}
 
input[type="submit"]:hover {
    background-color: #27ae60;
}
 
/* Seleciona divs com atributo data-info="importante" */
div[data-info="importante"] {
    background-color: #f39c12; /* Laranja */
    color: white;
    padding: 10px;
    margin-top: 15px;
    font-weight: bold;
}
 
/* Seleciona divs com atributo data-tipo que começa com 'aviso' */
div[data-tipo^="aviso"] {
    border-left: 3px solid #e67e22; /* Laranja escuro */
    padding: 8px;
    margin-top: 5px;
    background-color: #fef9e7;
}
 
/* Seleciona divs com atributo data-tipo que contém 'critico' */
div[data-tipo*="critico"] {
    color: #c0392b; /* Vermelho */
    font-weight: bold;
}

💡 3. Combinando Seletores (Breve Menção)

É importante saber que você pode combinar seletores para criar regras mais específicas. Por exemplo:

  • p.intro: Seleciona parágrafos que também têm a classe intro.
  • div#minha-secao: Seleciona um div com o ID minha-secao.
  • a[target="_blank"].externo: Seleciona links que abrem em nova aba e têm a classe externo.

Dominar a combinação de seletores é um passo avançado que você naturalmente desenvolverá com a prática!

🎯 4. Exercícios Práticos: Mão na Massa!

Chegou a hora de praticar! Crie dois arquivos: index.html e style.css na mesma pasta.

Estrutura HTML Inicial (index.html):

<!DOCTYPE html>
<html lang="pt-br">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Desafio de Seletores</title>
    <link rel="stylesheet" href="style.css">
    <style>
        /* Estilos básicos para facilitar a visualização */
        body {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            margin: 20px;
            background-color: #f4f7f6;
            color: #333;
        }
        section {
            background-color: white;
            padding: 20px;
            margin-bottom: 20px;
            border-radius: 8px;
            box-shadow: 0 2px 5px rgba(0,0,0,0.1);
        }
        h2 {
            color: #2c3e50;
            border-bottom: 2px solid #e0e0e0;
            padding-bottom: 10px;
            margin-top: 0;
        }
        ul {
            list-style-type: none;
            padding: 0;
        }
        li {
            padding: 8px 0;
            border-bottom: 1px dashed #eee;
        }
        li:last-child {
            border-bottom: none;
        }
        input[type="text"], input[type="email"] {
            width: calc(100% - 22px);
            padding: 10px;
            margin-bottom: 10px;
            border: 1px solid #ccc;
            border-radius: 4px;
        }
        button {
            background-color: #28a745;
            color: white;
            padding: 10px 15px;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            font-size: 1em;
        }
        button:hover {
            background-color: #218838;
        }
    </style>
</head>
<body>
    <header>
        <h1 id="titulo-principal">Meu Site de Notícias</h1>
        <nav>
            <a href="#home" class="nav-link">Home</a>
            <a href="#artigos" class="nav-link">Artigos</a>
            <a href="#contato" class="nav-link" data-secao="formulario">Contato</a>
        </nav>
    </header>
 
    <main>
        <section class="destaque">
            <h2>Notícia Urgente!</h2>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. <span class="info-extra">Leia mais aqui.</span></p>
            <button>Ver Detalhes</button>
        </section>
 
        <section id="lista-artigos">
            <h2>Últimos Artigos</h2>
            <ul>
                <li class="artigo-item">
                    <h3>HTML Semântico para Iniciantes</h3>
                    <p>Aprenda a estruturar seu conteúdo de forma significativa.</p>
                    <a href="/artigo-html.html" data-categoria="webdev">Ler Artigo</a>
                </li>
                <li class="artigo-item">
                    <h3>CSS Grid vs Flexbox: Qual usar?</h3>
                    <p>Entenda as diferenças e quando aplicar cada um.</p>
                    <a href="/artigo-css.html" data-categoria="webdev">Ler Artigo</a>
                </li>
                <li class="artigo-item destaque">
                    <h3>JavaScript Essencial: Variáveis e Tipos</h3>
                    <p>Os fundamentos da programação com JavaScript.</p>
                    <a href="https://www.javascript.com/docs" target="_blank" data-categoria="programacao">Ler Documentação Externa</a>
                </li>
            </ul>
        </section>
 
        <section class="contato">
            <h2 id="formulario-contato">Fale Conosco</h2>
            <form>
                <label for="nome">Nome:</label>
                <input type="text" id="nome" name="nome" placeholder="Seu nome completo">
 
                <label for="email">Email:</label>
                <input type="email" id="email" name="email" placeholder="seu.email@exemplo.com">
 
                <button type="submit">Enviar Mensagem</button>
            </form>
        </section>
    </main>
 
    <footer>
        <p>&copy; 2023 Meu Site de Notícias. Todos os direitos reservados.</p>
    </footer>
</body>
</html>

Tarefas de Estilização (style.css):

Crie um arquivo style.css e adicione as regras CSS para cumprir os seguintes desafios:

/* style.css - Comece a partir daqui! */
 
/* Desafio 1: Seletor de Tipo */
/* Estilize todos os títulos H1 com uma cor azul escura e centralize o texto. */
/* Estilize todos os parágrafos (<p>) com uma fonte de tamanho 1.1em e cor cinza mais suave. */
/* Estilize todos os links (<a>) para remover o sublinhado e ter uma cor primária. */
 
 
/* Desafio 2: Seletor de Classe */
/* Dê um background levemente amarelado e uma borda arredondada a todos os elementos com a classe 'destaque'. */
/* Mude a cor do texto para verde escuro para todos os elementos com a classe 'info-extra'. */
/* Adicione um padding e uma sombra sutil aos elementos com a classe 'nav-link'. */
 
 
/* Desafio 3: Seletor de ID */
/* Mude a cor de fundo do cabeçalho principal (com ID 'titulo-principal') para um azul marinho. */
/* Alinhe o texto do formulário de contato (com ID 'formulario-contato') à esquerda e mude a cor para um cinza escuro. */
/* Adicione uma borda esquerda distinta à seção de artigos (com ID 'lista-artigos'). */
 
 
/* Desafio 4: Seletor de Atributo */
/* Estilize todos os links que apontam para URLs externas (começam com 'https://') com um ícone de "link externo" (pode ser apenas uma cor diferente por enquanto). */
/* Dê um background diferente para os links que possuem o atributo 'data-categoria' com o valor 'webdev'. */
/* Estilize o input de email (type="email") para ter uma borda azul clara quando focado. */
/* Mude a cor do botão de submit (type="submit") para um tom de verde mais vibrante. */
/* Estilize os links que possuem o atributo 'data-secao' com o valor 'formulario' para ter um texto em itálico. */

Verificação e Ajustes

Após aplicar todos os estilos, abra o index.html no seu navegador. Seu objetivo é que a página reflita as mudanças de estilo que você aplicou. Se algo não estiver funcionando, revise a sintaxe e a ortografia dos seus seletores e propriedades.

🧠 5. Resumo e Próximos Passos

Nesta aula, você aprendeu sobre os seletores CSS mais fundamentais:

  • Tipo: Seleciona elementos pela sua tag HTML (p, h1, a).
  • Classe: Seleciona elementos com um atributo class específico (.minha-classe). Reutilizável e flexível.
  • ID: Seleciona um único elemento com um atributo id específico (#meu-id). Deve ser único na página.
  • Atributo: Seleciona elementos com base na presença ou valor de um atributo ([href], [type="text"], [data-info^="aviso"]).

Dominar esses seletores é crucial para construir interfaces web bem estilizadas e manuteníveis.

Próximos Passos:

  • Pratique mais: Tente criar sua própria página HTML e estilizar cada elemento usando diferentes seletores.
  • Seletor Universal (*): Explore o seletor universal que seleciona todos os elementos.
  • Seletores Combinadores: Descubra como combinar seletores para atingir elementos com base em sua relação com outros elementos (descendentes, irmãos, etc.).
  • Especificidade CSS: Entenda como o navegador decide qual regra CSS aplicar quando vários seletores podem atingir o mesmo elemento. Este é um tópico avançado, mas fundamental!

Continue praticando e experimentando! A estilização é uma arte e a prática leva à perfeição. 🎨

Ver Curso

© 2025 Escola All Dev. Todos os direitos reservados.

Seletores CSS: Tipo, Classe, ID e Atributos - Fundamentos da Web com HTML e CSS | escola.all.dev.br