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:
* {
margin: 0;
padding: 0;
font-family: helvetica, arial, sans-serif;
font-size: 16px;
}
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:
h2 + p {
font-weight: bold;
}
E o resultado seria:
Título
Este parágrafo fica em negrito.
O seletor não se aplica ao segundo parágrafo.
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
ul > li {
font-weight: bold;
}
E o resultado seria:
- Item em negrito
- Item da sublista
- Item da sublista
- Item da sublista
- Item em negrito
- Item em negrito
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:
a[href*="facebook"] {
font-weight: bold;
}
E o resultado seria:
Este link fica em negrito. O seletor não se aplica a este link.
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:
div:not(.footer) {
font-weight: bold;
}
E o resultado seria:
Esta div fica em negrito.Esta div fica em negrito.Esta div fica em negrito.
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:
ul li:first-child {
font-weight: bold;
}
ul li:last-child {
font-weight: bold;
}
E o resultado seria:
- Item em negrito
- Item sem negrito
- Item sem negrito
- Item em negrito
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:
ul li:nth-child(3) {
font-weight: bold;
}
E o resultado seria:
- Item sem negrito
- Item sem negrito
- Item em negrito
- Item sem negrito
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:
ul li:nth-child(3n) {
font-weight: bold;
}
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:
ul li:nth-last-child(3) {
font-weight: bold;
}
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
div p:nth-of-type(3) {
font-weight: bold;
}
E o resultado seria:
O seletor não se aplica ao primeiro parágrafo.
O seletor não se aplica ao segundo parágrafo.
Este parágrafo fica em negrito.
O seletor não se aplica ao quarto parágrafo.
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:
a:visited { color: blue; }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.
