0 Compartilhamentos 80 Views 3 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.

    Você pode se interessar

    Microsoft terá webinar gratuito sobre Data e AI
    Notícias
    5 visualizações
    Notícias
    5 visualizações

    Microsoft terá webinar gratuito sobre Data e AI

    Redação - 18 de Janeiro de 2018

    Data & AI Summit é o webinar gratuito oferecido pela Microsoft no próximo dia 23.

    O que é preciso saber para iniciar um curso de desenvolvimento mobile?
    Artigos
    5 visualizações
    Artigos
    5 visualizações

    O que é preciso saber para iniciar um curso de desenvolvimento mobile?

    Redação - 17 de Janeiro de 2018

    Você está querendo entrar na área de desenvolvimento mobile, mas o que é preciso saber para iniciar um curso de programação mobile? Gustavo Torrente, vai nos dar algumas dicas.

    O que aconteceu com o Winamp?
    Artigos
    8 visualizações
    Artigos
    8 visualizações

    O que aconteceu com o Winamp?

    Carlos L. A. da Silva - 15 de Janeiro de 2018

    Durante anos o Winamp foi um dos mais populares programas de reprodução de mídia em computadores. Conheça sua história, sua ascensão e queda.

    3 Responses

    Deixe um Comentário

    Your email address will not be published.

    Mais publicações