0 Compartilhamentos 1899 Views 4 Comments

10 Seletores de CSS Que Você Deveria Usar

19 de setembro de 2013

Toda vez que usamos CSS, nós usamos seletores. Apesar disso, os seletores de CSS ainda são uma das partes mais subutilizadas da especificação.

CSS3 está chegando trazendo diversas funcionalidades, mas existe muito poder escondido no bom e velho CSS2. Um uso inteligente dos seletores pode tornar nosso dia-a-dia mais tranquilo e nosso código mais eficiente.

Vamos apresentar aqui 10 seletores que muito provavelmente você não está usando nas suas folhas de estilo. Entenda como eles funcionam e guarde na mente para usar na próxima oportunidade:

*

O seletor * (asterisco) é possivelmente o mais conhecido da lista, mas isto não quer dizer que ele seja usado com a frequência que merece. Empregado isoladamente, ele pode especificar um estilo geral que abrange todos os elementos da página, ideal para resetar propriedades ou estabelecer padrões, como a fonte em uso no site.

Exemplo:

A + B

Este seletor é chamado de seletor adjacente e o que ele faz é aplicar o estilo ao elemento B que vem imediatamente depois do elemento A.

Por exemplo, se você deseja selecionar o primeiro parágrafo após um título

, você utilizaria:

E o resultado seria:

A > B

Este seletor aplica o estilo somente aos filhos diretos de A, ao contrário do mais famoso A B, que seleciona todos os níveis de filhos de A. Este seletor é recomendado quando você deseja criar um estilo apenas para o primeiro nível dos filhos de um determinado elemento.

Por exemplo, se você não deseja selecionar os elementos

  • da sublista de uma lista principal, você deve empregar:

    E o resultado seria:

    Se você tivesse optado pelo seletor ul li , os itens da sublista também teriam ficado em negrito.

    a[href*=”exemplo”]

    Este seletor é uma carta na manga para quando você precisa que um determinado link tenha um estilo diferente dos outros. O seletor irá comparar o valor do atributo HREF com a string entre aspas e verificar se ela está presente antes de aplicar o estilo.

    Por exemplo, para gerar um estilo para todos os links de uma página que levam para o Facebook:

    E o resultado seria:

    Se você remover o * (asterisco) do seletor, ele irá procurar o valor exato da string na URL do link.

    A:not(B)

    Este seletor adiciona uma exceção ao elemento A. Na prática, o estilo é aplicado a todos os elementos A, exceto aqueles que sejam B.

    Por exemplo, se você quer selecionar todas as divs de uma página, menos aquela que fica no rodapé, você pode usar:

    E o resultado seria:

    A:first-child / A:last-child

    Estes dois seletores permitem especificar o primeiro e o último filho de um elemento pai, respectivamente. Este seletor pode ser de uma ajuda inestimável para aplicar estilos ao primeiro item de uma lista, para remover margens de itens com float, para especificar bordas de colunas etc.

    Por exemplo, para aplicar um estilo ao primeiro e ao último item de uma lista, nós usaríamos:

    E o resultado seria:

     

    A:nth-child(n)

    Este seletor é uma variação do anterior, onde você especifica a posição do elemento filho dentro do elemento pai A.

    Por exemplo, se você deseja selecionar apenas o terceiro item de uma lista, você pode usar:

    E o resultado seria:

    Nós também podemos usar este seletor para múltiplos daquela posição, aplicando a variável n no final do número.

    Por exemplo, para selecionar os itens 3, 6, 9 e assim por diante de uma lista, nós usaríamos o seguinte CSS:

    A:nth-last-child(n)

    Este seletor é uma variação do anterior, onde a contagem de filhos começa do último.

    Por exemplo, se você deseja selecionar apenas o antepenúltimo item de uma lista, você pode usar:

    A B:nth-of-type(n)

    Este seletor pega o conceito de ordem estabelecido pelos seletores anteriores e mescla com tipos de elementos. Usando este seletor, você irá aplicar seu estilo ao elemento B que vem na posição n dentro do elemento A.

    Por exemplo, para selecionar o terceiro parágrafo dentro de uma

    você usaria:


    E o resultado seria:

    a:visited

    Este talvez seja o mais antigo de todos os seletores vistos aqui. Tão antigo que já foi muito utilizado no passado e agora está quase completamente esquecido, gerando um problema sério de usabilidade…

    Já reparou, ao fazer uma busca no Google, que as páginas que você já visitou aparecem com uma cor diferente? É exatamente isto o que este seletor faz.

    Exemplo:

    Conclusão

    Memorizar a função de cada um destes seletores e aplicar a lógica na sua página pode economizar o uso indiscriminado de IDs para todos os lados, permitir a criação de exceções complexas e trazer uma flexibilidade ainda maior ao ainda útil e incompreendido CSS2.

    Carregando...

    Você pode se interessar

    Conhecendo Svelte
    Artigos
    166 visualizações
    Artigos
    166 visualizações

    Conhecendo Svelte

    Carlos L. A. da Silva - 6 de janeiro de 2022

    Svelte, React ou Vue? O especialista Josh Collinsworth disserta sobre a solução em seus mínimos detalhes.

    Petrobras abre concurso com 757 vagas de nível superior
    Artigos
    221 visualizações
    Artigos
    221 visualizações

    Petrobras abre concurso com 757 vagas de nível superior

    Redação - 30 de dezembro de 2021

    Há vagas para cientistas de dados, engenheiros e analistas de sistemas entre outras carreiras. As inscrições permanecerão abertas até o dia 05 de janeiro de 2022.

    A história da imagem mais antiga da internet
    Artigos
    256 visualizações
    Artigos
    256 visualizações

    A história da imagem mais antiga da internet

    Carlos L. A. da Silva - 28 de dezembro de 2021

    Lena Sjooblom saiu da página central da Playboy para se tornar um ícone dos engenheiros de imagens.

    4 Responses

    Deixe um Comentário

    Your email address will not be published.

    Mais publicações

    Coreia do Sul no mapa dos jogos
    Artigos
    267 visualizações
    267 visualizações

    Coreia do Sul no mapa dos jogos

    Carlos L. A. da Silva - 22 de dezembro de 2021
    Rust é o futuro da infraestrutura JavaScript
    Artigos
    551 visualizações
    551 visualizações

    Rust é o futuro da infraestrutura JavaScript

    Carlos L. A. da Silva - 6 de dezembro de 2021
    Influenciadores digitais que não existem
    Artigos
    539 visualizações
    539 visualizações

    Influenciadores digitais que não existem

    Carlos L. A. da Silva - 2 de dezembro de 2021