Dominando os Seletores CSS: Guia Prático de Sintaxe e Uso

Os seletores CSS são padrões fundamentais utilizados para selecionar e estilizar elementos dentro do DOM (Document Object Model) de uma página web. Eles permitem aplicar regras de estilo de forma precisa, direcionando elementos de forma individual, em grupo ou baseados em sua hierarquia estrutural.

Seletor de ID

O seletor de ID identifica um elemanto exclusivo no documento, utilizando o caractere # seguido pelo identificador do elemento.

<header id="painel-principal">Painel do Usuário</header>

<style>
    #painel-principal {
        background-color: #1e293b;
        color: #f8fafc;
    }
</style>

Seletor de Classe

Utilizado para estilizar múltiplos elementos que compartilham uma mesma característica, sendo precedido por um ponto .. Múltiplos seletores podem ser agrupados utilizando vírgulas para compartilhar as mesmas regras de estilo.

<button class="botao-acao">Salvar</button>
<button class="botao-acao botao-perigo">Excluir</button>

<style>
    .botao-acao {
        padding: 10px 15px;
        border-radius: 4px;
    }
    
    /* Agrupamento de seletores */
    .botao-acao, .texto-destaque {
        font-weight: bold;
    }
</style>

Seletor de Tag (Tipo)

Direciona todas as instâncias de um elemento HTML específico na página, sem a necessidade de identificadores ou classes.

<p>Texto introdutório do artigo.</p>
<p>Mais informações sobre o tópico.</p>

<style>
    p {
        line-height: 1.6;
        color: #334155;
    }
</style>

Seletores de Irmãos

O operador + seleciona apenas o irmão imediatamente adjacente (o próximo elemento no mesmo nível). O operador ~ seleciona todos os irmãos subsequentes ao elemento base, independentemente de estarem logo ao lado.

<label for="campo-email">Email:</label>
<input type="email" id="campo-email">
<span class="msg-erro">Formato inválido</span>

<h3>Avisos</h3>
<p class="aviso">Aviso 1</p>
<p class="aviso">Aviso 2</p>
<p class="aviso">Aviso 3</p>

<style>
    /* Seleciona apenas o input imediatamente após o label */
    label + input {
        border: 1px solid #cbd5e1;
    }
    
    /* Seleciona todos os parágrafos de aviso após o h3 */
    h3 ~ .aviso {
        color: #b45309;
    }
</style>

Seletores de Descendência e Filhos

O espaço em branco atua como seletor de descendentes, afetando todos os elementos correspondentes independentemente do nível de aninhamento. O operador > restringe a seleção estritamente aos filhos diretos do elemento.

<nav class="menu-lateral">
    <div>Menu Principal</div>
    <ul>
        <li>Item Direto</li>
        <li>
            Submenu
            <ul>
                <li>Item Aninhado</li>
            </ul>
        </li>
    </ul>
</nav>

<style>
    /* Aplica estilo apenas à div e ul que são filhos diretos de .menu-lateral */
    .menu-lateral > div, .menu-lateral > ul {
        margin-bottom: 15px;
    }
    
    /* Aplica a todos os elementos li dentro de .menu-lateral */
    .menu-lateral li {
        padding: 5px 0;
    }
</style>

Seletor Universal

Representado pelo asterisco *, seleciona todos os elementos dentro do escopo determinado pelo seletor pai.

<section class="card-container">
    <h4>Título do Card</h4>
    <p>Conteúdo do Card</p>
</section>

<style>
    .card-container * {
        box-sizing: border-box;
        margin: 0;
    }
</style>

Seletor de Atributo

Permite isolar elementos baseados na presença ou no valor exato de um atributo HTML definido na tag.

<a href="https://exemplo.com" target="_blank" rel="noopener">Link Externo</a>

<style>
    a[target="_blank"] {
        text-decoration: dashed underline;
        color: #2563eb;
    }
</style>

Seletor de Pseudo-classe

Utilizado para definir estilos em estados especiais de um elemento, como sua posição estrutural em uma lista ou interação do usuário.

<ul class="lista-dados">
    <li>Registro Inicial</li>
    <li>Registro Secundário</li>
</ul>

<style>
    .lista-dados li:first-child {
        font-weight: bold;
        color: #0f172a;
    }
</style>

Exemplo de Implementação Integrada


<html lang="pt-BR">
<head>
    <meta charset="UTF-8">
    <title>Painel de Controle</title>
    <style>
        body {
            font-family: system-ui, sans-serif;
        }

        #cabecalho-app {
            background: #0f172a;
            color: white;
            padding: 20px;
        }

        .cartao-info, .cartao-aviso {
            border: 1px solid #e2e8f0;
            margin: 10px 0;
            padding: 15px;
            border-radius: 6px;
        }

        article {
            background: #f8fafc;
            padding: 20px;
        }

        /* Irmão adjacente */
        .cartao-info + .cartao-aviso {
            border-color: #ef4444;
            background: #fef2f2;
        }

        /* Irmão geral */
        #cabecalho-app ~ article {
            margin-top: 20px;
        }

        /* Filho direto */
        .lista-metricas > li {
            font-size: 1.1rem;
            margin: 5px 0;
        }

        /* Universal */
        .container-geral * {
            transition: opacity 0.3s ease;
        }

        /* Atributo */
        input[type="password"] {
            letter-spacing: 3px;
        }

        /* Pseudo-classe */
        .lista-metricas li:first-child {
            font-weight: bold;
            color: #1d4ed8;
        }
    </style>
</head>
<body>
    <header id="cabecalho-app">Painel Principal</header>
    
    <article class="container-geral">
        <div class="cartao-info">Dados do Usuário</div>
        <div class="cartao-aviso">Ação Necessária: Atualizar Senha</div>
        
        <ul class="lista-metricas">
            <li>Visitas: 1.200</li>
            <li>Conversões: 45</li>
            <li>Receita: R$ 3.000</li>
        </ul>
        
        <form>
            <input type="text" placeholder="Usuário">
            <input type="password" placeholder="Senha">
        </form>
    </article>
</body>
</html>

Tags: CSS HTML DOM seletores-css pseudo-classes

Publicado em 6-7 21:03 por Thomas

Doido Dev