Introdução

Fala pessoal, esse é mais um post da série seletores avançados de CSS, como explicado no post anterior, Pseudo-classes de CSS, as pseudo-classes são todos os seletores iniciados com :, dois pontos.

Por existir várias pseudo-classes diferentes, não consegui abordar todas no primeiro post e vimos somente as mais simples, algumas que poucos sabiam que existiam, mas simples. Dessa forma no post de hoje trataremos as mais avançadas, as pseudo-classes que te possibilitam selecionar elementos em ordem matemática ou não selecionar baseado em seu seletor por exemplo.

Espero que gostem, e vamos por as mãos na massa !

Quais pseudo-classes veremos?

Para não sair do padrão da série, vamos começar falando quais pseudo-classes iremos ver aqui, ajudando também a galera que vai revisitar essa página pra dar uma olhada naquele seletor que lembrou mais ou menos.

Os elementos :link e :visited não são muito avançados, eles estão nessa lista pois no post anterior a lista ja estava muito grande, não que essa não tenha ficado...

A pseudo-classe :link, seleciona todos os links que não foram visitados ainda.

:visited

A pseudo-classe :visited, faz o oposto de :link e seleciona todos os links que ja foram visitados.

:root

A pseudo-classe :root, irá selecionar o :root da sua página, que é o elemento html.

:target

A pseudo-classe :target, selecionará o elemento âncora da url, que é quando voce clica em algum link com o href igual a #alguma-coisa, esse é o elemento ancora.

:not(seletor)

A pseudo-classe :not(seletor), seleciona todos os elementos que não possuem aquele seletor.

:first-child

A pseudo-classe :first-child, seleciona o elemento que é o primeiro filho de um elemento pai.

:last-child

A pseudo-classe :last-child, como o nome ja diz, selecionará o último filho de um elemento pai.

:only-child

A pseudo-classe :only-child, serve para selecionar aquele elemento que é filho único do elemento pai.

:first-of-type

A pseudo-classe :first-of-type, selecionará o primeiro elemento de determinado tipo, “tipo” no caso será se o elemento é uma div, ou um span etc.

:last-of-type

A pseudo-classe :last-of-type, tem comportamento inverso ao :first-of-type e seleciona o último elemento de determinado tipo.

:only-of-type

A pseudo-classe :only-of-type, tem comportamento idêntico ao :only-child selecionando apenas o filho único do elemento pai, porém será baseado no tipo do elemento, se é uma ‘div’, um ‘span’ ou um ‘p’ por exemplo, dessa forma no :only-of-type você pode ter vários elementos de tipos diferentes, e selecioná-los desde que sejam os únicos daquele tipo naquele nível da árvore DOM.

Exemplos

Antes de continuarmos para a próxima parte que será um pouco mais complicada por ter fórmulas que deverão ser passadas como parâmetros para as pseudo-classes, vamos dar uma olhada nos exemplos de todas as pseudo-classes vistas até agora.

See the Pen Pseudo-classes avançadas by Matheus Mesquita (@mathmesquita) on CodePen.

Pseudo-classes com fórmulas

:nth-child(n)

A pseudo-classe :nth-child(n), irá selecionar todos os elementos que se adequem a uma fórmula, na ordem do primeiro para o último.

:nth-last-child(n)

A pseudo-classe :nth-last-child(n), seleciona todos os elementos que se adequem a uma fórmula, na ordem do último para o primeiro.

:nth-of-type(n)

A pseudo-classe :nth-of-type(n), também se comportará como o :nth-child(n) porém irá selecionar somente os de determinado tipo que sejam selecionados pela fórmula passada como parâmetro, na ordem do primeiro para o último.

:nth-last-of-type(n)

A pseudo-classe :nth-last-of-type(n), tem o mesmo comportamento que :nth-of-type porém a ordem que a fórmula será aplicada é do último para o primeiro.

As fórmulas aceitas

Antes de falarmos das fórmulas, tenho que esclarecer uma coisa, estarei usando sempre a pseudo-classe :nth-child(n) porém as fórmulas são válidas para qualquer outra que também aceite uma fórmula como parâmetro, sendo assim você que irá decidir qual pseudo-classe se adequa mais ao seu caso.

As fórmulas devem ser sempre descritas por (an +- b), tal que, a será “o tamanho do pulo em cada passada”, podendo ser negativo ou positivo, n irá ser cada iteração na função começando em zero e b será o coeficiente inicial.

Alguns exemplos de uso:

Selecionando elementros pares

Caso quisessemos selecionar todos os elementos filhos que sejam pares, iriamos passar a fórmula :nth-child(2n), pois começando em zero, ela iria em cada iteração multiplicar n por dois resultando em um número par, [2*0=0, 2*1=2, 2*2=4, 2*3=6, 8, 10, 12, 2*n…].

Selecionando elementos impares

Para selecionarmos os elementos filhos impares, a fórmula seria :nth-child(2n + 1), dessa forma o resultado das interações ficaria igual a [2*0+1=1, 2*1+1=3, 2*2+1=5, 7, 9, 11, 2*n+1…].

Impares e Pares de forma fácil

Apesar de termos mostrado o uso das fórmulas com o exemplo de selecionar números impares e pares, não precisamos nos preocupar muito nesses casos, o CSS ja possui duas palavras-chave que tratam de selecionar numeros pares e impares, elas são (even) e (odd) respectivamente.

Selecionando os 3 primeiros itens

Também podemos selecionar apenas os 3 primeiros por exemplo, com a fórmula :nth-child(-n + 3), nesse caso é importante lembrar que a fórmula tem que estar sempre no mesmo formato de (an +- b), sendo que a pode ser um número negativo.

Selecionando os 3 últimos itens

E para selecionarmos os 3 últimos, utilizaremos a mesma fórmula, porém com a pseudo-classe :nth-last-child, que basicamente faz a mesma coisa que child, porém na direção de baixo para cima, ou último para o primeiro. Nosso css ficaria :nth-last-child(-n + 3).

Selecionando elementos específicos

Nada te impede de selecionar algum elemento com um número específico também, caso queira selecionar o terceiro elemento, você poderia utilizar :nth-child(3), e para selecionar o penúltimo utilizar :nth-last-child(2).

Exemplos

See the Pen Pseudo-classes avançadas by Matheus Mesquita (@mathmesquita) on CodePen.

Conclusão

É, deixei de por alguns seletores no post passado por achar que tinha ficado grande demais, talvez tenha me enganado quanto ao tamanho que esse aqui teria.

De qualquer forma, é isso ai, conseguimos cobrir todas as outras pseudo-classes que faltavam, acho que vou mudar o nome dessa série para seletores CSS do básico ao avançado, por que foi o que acabou acontecendo com os posts. Ainda falta mais um, nele iremos falar dos pseudo-elementos que são basicamente seletores que criam “elementos” no seu DOM, te permitindo fazer muitas coisas com eles.

Por fim, muito Obrigado para quem leu até aqui, e para quem leu só metade também, e para quem só entrou no link, o interesse em vir ler o post ja é algo gratificante para mim ! Espero que tenham gostado, creio que depois dessa série irei me afastar um pouco dos posts falando sobre CSS e focar um pouco mais na parte difícil do front-end que é o javascript.

Dúvidas, sugestões, dicas, um oi e qualquer outra interação, estarei nos comentários ! Obrigado novamente e até o próximo post galera !