Toda vez que usamos CSS, usamos seletores. Mas, apesar disso, os seletores CSS são uma das partes mais negligenciadas da especificação.
Falamos sobre as grandes transformações no CSS3, mas muitas vezes esquecemos o básico. O bom uso de seletores torna nossa codificação do dia-a-dia mais simples e elegante. Hoje vou cobrir os 10 seletores que muitas vezes escorregam em nossas mentes, mas são eficazes e altamente úteis.
O seletor * pode ser o que você lembra mais facilmente, mas muitas vezes é subutilizado. O que ele faz é estilizar tudo na página e é ótimo para criar uma redefinição e também para criar alguns padrões de página, como a família de fontes e o tamanho que você deseja ter.
* {margin: 0;padding: 0;font-family: helvetica, arial, sans-serif;font-size: 16px;}Esse seletor é chamado de seletor adjacente e o que ele faz é selecionar o elemento que está imediatamente após o primeiro elemento. Se você quisesse selecionar o primeiro div após nosso cabeçalho, você digitaria:
header + div {margin-top: 50px;}Este seletor selecionará somente os filhos diretos, ao contrário de AB, que selecionarão quaisquer filhos de nível A. Esse seletor é recomendado para quando você estiver trabalhando com filhos de primeiro nível de um elemento pai. Por exemplo, se você quiser selecionar os itens da lista de primeiro nível em uma lista não ordenada que se parece com isso:
- List Item With ul
- Sub list item
- Sub list item
- Sub list item
- List Item
- List Item
Você usaria esse seletor porque o seletor AB usual também selecionaria os itens da lista dentro da lista desordenada aninhada.
ul > li {background: black;color: white;}Este é um seletor realmente bom para quando você deseja estilizar um link específico de uma maneira diferente, o que estiver entre aspas será comparado com o href do link. Por exemplo, para estilizar todos os links para o facebook com a cor azul que você usaria:
a[href*="facebook"] {color: blue;}Há também uma versão sem o * que corresponde ao URL exato que você pode usar para links exatos.
Este seletor se for particularmente útil por causa de sua cláusula de negação que permite selecionar qualquer grupo de elementos que não correspondam ao que você coloca em B. Se você quiser selecionar todos os itens exceto o rodapé que você precisa:
div:not(.footer) {margin-bottom: 40px;}O primeiro filho e o último filho nos permitem selecionar o primeiro e o último filho do elemento pai. Isso pode ser de grande ajuda quando se trata de listar itens e remover margens ou bordas. Para remover a borda no primeiro item da lista e a margem no último item da lista, você precisa:
ul li:first-child {border: none;}ul li:last-child {margin-right: 0px;}O n-filho é uma maneira simples de selecionar qualquer filho de um elemento por sua ordem. Se, por exemplo, você quisesse o terceiro item da lista em uma lista não ordenada, este seria o caminho a seguir:
ul li:nth-child(3) {background: #ccc;}Podemos usar n-filho para selecionar todos os multiplicadores de um número usando a variável n, por exemplo, se colocarmos 3n, selecionaríamos o item da lista número 3, 6, 9, 12 e assim por diante.
O n-último filho funciona como o n-filho, mas em vez de contar o primeiro item da lista começa a contar do último, então se você usá-lo com o número dois, ele selecionará o item da lista que vem antes do último. seu uso é como o seletor n-filho:
ul li:nth-last-child(2) {background: #ccc;}Esse seletor faz exatamente o que você acha que faz; ele vê que tipo de elemento você colocou nele e seleciona, por exemplo, o terceiro elemento na sua página que corresponde ao que você digitou. Para selecionar o terceiro parágrafo em um div, você usaria:
div p:nth-of-type(3) {font-style: italic;}Já notou que quando você procura por algo no google as páginas que você já viu aparecem em uma cor diferente? Isso é exatamente o que visitou faz. Este é um ótimo complemento para os usuários, mas às vezes é esquecido e pela minha experiência é útil toda vez que eu pesquiso no google.
a:visited {color: blue;}Na minha experiência, usando esses tipos de seletores quando a codificação pode nos poupar muito tempo e também evitar a necessidade de muitos IDs bagunçando nossa marcação. E este é apenas o começo dos seletores CSS, há muito mais seletores que são realmente úteis, mas às vezes esquecidos.
Você usa seletores CSS em suas folhas de estilo? É mais fácil recorrer a IDs e classes? Deixe-nos saber nos comentários.
Imagem em destaque / miniatura, imagem de código via Shutterstock.