image

Bootcamps ilimitados e +650 cursos pra sempre

60
%OFF
Article image
Shilluê Silva
Shilluê Silva26/08/2025 10:41
Compartilhe

🎯 Seletores de Atributo no CSS: O Guia Simples e Direto!

    Fala, devs em ascensão! 👋 Já tá mandando bem no HTML e começando a brincar com CSS? Então deixa eu te apresentar um superpoder estiloso: os seletores de atributo! 💅✨

    Eles parecem coisa de filme de espião 🕵️‍♂️, mas na real são só formas espertas de aplicar estilos baseados em atributos HTML. Simples, direto e muito útil!


    🧩 O que são atributos, mesmo?

    Antes de tudo: atributos são informações extras que ficam dentro das tags HTML. Tipo assim:

    html
    <input type="text" placeholder="Digite seu nome" />
    <a href="https://dio.me">Acesse a DIO</a>
    

    Nesse exemplo, type, placeholder e href são atributos. E com CSS, dá pra selecionar elementos com base nesses atributos e deixar tudo mais estiloso e funcional! 💻🎨


    🔍 Selecionando com atributos: a base

    O seletor mais básico é assim:

    css
    [elemento[atributo]] {
    /* estilo aqui */
    }
    

    Exemplo:

    css
    input[type] {
    border: 2px solid blue;
    }
    

    ➡️ Isso seleciona todo input que tiver o atributo type, independente do valor (text, password, etc.).

    🎯 Selecionando com valor específico

    Se quiser ser mais específico, tipo “só os inputs de texto”, faz assim:

    css
    input[type="text"] {
    background-color: #f0f8ff;
    }
    

    ➡️ Só aplica o estilo se o type for exatamente “text”.

    🧠 Outros operadores úteis

    Vamos deixar isso mais ninja? 🥷 Olha esses seletores avançados:

    1. [attr^="valor"] → Começa com...

    css
    img[src$=".png"] {
    border-radius: 8px;
    }
    

    ✅ Pega imagens com src terminando em “.png”. Bem útil pra tratar formatos específicos!

    3. [attr*="valor"] → Contém...

    css
    a[href*="dio"] {
    text-decoration: underline;
    }
    

    ✅ Aplica estilo a qualquer link que tenha “dio” em qualquer parte do href.

    🧪 Dica de laboratório: brinque no seu HTML!

    Crie um HTML simples e teste esses seletores com diferentes atributos. Ver funcionando na prática faz o cérebro dar aquele “click” de aprendizado! 💡🧠

    📦 Resumindo no estilo tabela (que a gente ama):

    No mundo do CSS, você pode escolher seus elementos HTML usando atributos, quase como escolher personagens para uma guilda de anime. O seletor [attr] pega todos os elementos que têm um certo atributo, tipo reunir todo mundo que tem um poder especial. [attr="valor"] é mais específico: só pega quem tem exatamente aquele poder, como o protagonista com a técnica secreta perfeita. [attr^="valor"] seleciona quem começa com determinado poder, enquanto [attr$="valor"] pega quem termina com ele, tipo ataques de final de episódio. E [attr*="valor"] é o mais versátil, pegando qualquer um que tenha aquele poder em algum lugar, como todos os personagens com um item raro no inventário. Com esses seletores, você controla sua “guilda” de elementos HTML de forma precisa e estilosa!

    🚀 Por que isso importa?

    Porque com seletores de atributo, você tem mais controle e flexibilidade no CSS, sem depender de classes e IDs pra tudo. Ideal pra quando você trabalha com formulários, ícones, links ou páginas dinâmicas! 💼⚙️

    Compartilhe
    Recomendados para você
    Cognizant - Mobile Developer
    Luizalabs - Back-end com Python
    PcD Tech Bradesco - Java & QA Developer
    Comentários (3)
    Shilluê Silva
    Shilluê Silva - 27/08/2025 08:58

    Muito obrigado pelo feedback! Fico feliz demais em saber que a explicação ajudou a deixar o tema mais acessível.

    Eu recomendo começar pelas pseudo-classes combinadas com seletores de atributo, tipo input[type="text"]:focus ou a[href*="dio"]:hover. Isso porque já vai perceber como o CSS pode reagir a interações do usuário e dar vida à página, o que torna o aprendizado mais prático e visual, consequentemente, mais prazeroso. 

    DIO Community
    DIO Community - 26/08/2025 17:23

    Excelente guia, Shilluê! Você conseguiu explicar os seletores de atributo no CSS de forma leve, prática e super acessível, transformando um tema que costuma parecer “avançado” em algo que qualquer iniciante consegue aplicar já no primeiro teste de HTML e CSS. Os exemplos estão muito bem escolhidos — especialmente o uso de [attr^=], [attr$=] e [attr*=], que mostram o real poder desses seletores em situações do dia a dia como formulários e imagens.

    Na DIO, acreditamos que dominar essas pequenas técnicas de estilo é o que ajuda um dev iniciante a evoluir rapidamente, porque dá mais liberdade criativa sem depender apenas de classes e IDs. Gostei muito também da sua analogia com guildas de anime, que deixou o aprendizado ainda mais divertido e memorável!

    Quero te perguntar: se fosse dar um próximo passo prático para quem já entendeu seletores de atributo, você recomendaria explorar pseudo-classes combinadas (como :hover ou :focus junto com atributos) ou partir logo para CSS avançado com seletores aninhados e variáveis?

    Islânia Silva
    Islânia Silva - 26/08/2025 11:26

    Obrigada por esse conteúdo de valor! 🤗