Seletores pseudoclasses para elementos-filhos
Introdução
As Recomendações do W3C para Seletores nível 3 preveem 10 (dez) pseudoclasses estruturais para "casar" (selecionar) elementos-filhos de um container.
A existência e uso dessas pseudoclasses CSS é pouco conhecida, inclusive por desenvolvedores experientes, pelo fato de que a força desses seletores se faz presente quanto precisamos estilizar elementos de tabelas, itens de listas complexas e elementos HTML similares, tipicamente constituidos por um elemento-pai padrão e seus elementos-filhos.
Para tirar o máximo proveito das áreas de interação existentes nessa página bem como entender com detalhes o funcionamento de cada pseudoclasse não se limite a ler o título e partir para a área interativa. Leia com atenção, e releia até entender, todas as instruções e orientações de interação, para então fazer suas interações.
Nesse tutorial apresentamos e explicamos o alvo de cada uma das pseudoclasses e depois da explicação existe uma área interativa para você treinar e visualizar o casamento do seletor pseudoclasse com seu alvo tornando-se um expert na seleção CSS de elementos-filhos com uso de pseudoclasses.
Instruções de uso da interface interativa
As áreas interativas compreendem duas subareas
a primeira subarea tem o fundo na cor preta é a subarea de edição CSS. Ali você irá digitar regras CSS, declarações CSS, valores CSS e/ou seletores CSS com a finalidade de interagir com a pseudoclasse estudada. Ao concluir a digitação o efeito de estilização será imediatamente aplicado na segunda subarea.
a segunda subarea tem o fundo na cor CSS maroon. Ali será aplicado o efeito das regras CSS que você editar na subarea de edição.
Essa subarea é constituida por um elemento-pai container e elementos-filhos de três tipos, DIV, P e SPAN representados por símbolos. Os elementos-filhos foram posicionados na horizontal (inline) e receberam um rótulo com o nome do elemento seguido de um número designando sua posição sequencial na marcação, conforme exemplos mostrados a seguir:
containerPara as pseudoclasses que "casam" em contagem de trás para frente, foi inserido também um número no lado direito do símbolo designando sua posição sequencial na marcação, contada de trás para frente conforme exemplos a seguir:
container
Na subarea de edição já constam regras de estilo com declarações incompletas a serem preenchidas por você. Dependendo da pseudoclasse estudada você deverá digitar uma cor CSS para o fundo, ou digitar um valor do tipo an + b dentro do parênteses, sendo a e b número inteiro positivo, negativo ou zero, conforme a sintaxe prevista para as pseudoclasses e explicada adiante.
Por exemplo: ( 3n + 3), ( -2n + 1 ), ( -n + 3 ), ( 4n ), ( 8 ), etc... sendo que n, quando houver, será automaticamente incrementado de uma unidade a partir de 0 ou ainda, digitar as palavras-chaves even (par) ou odd (ímpar) dentro do parênteses.
As 10 pseudoclasses
🙋 Vamos começar os estudos! 🙌
E:first-child — use essa sintaxe quando você sabe que o primeiro filho é um elemento do tipo E
:first-child — use essa sintaxe quando você não sabe qual é o tipo do elemento que é o primeiro filho
Casa com o elemento que é o primeiro elemento-filho do container.
Se você não sabe qual é o tipo do elemento que é o primeiro-filho use #container > :first-child
Área interativa para o caso de E conhecido e do tipo p (digite um valor para background-color)
>
#containerFirstChild
Área interativa para elemento primeiro-filho desconhecido(digite um valor para background-color)
#containerFirstChildD
E:last-child — use essa sintaxe quando você sabe que o último filho é um elemento do tipo E
:last-child — use essa sintaxe quando você não sabe qual é o tipo do elemento que é o último filho
Casa com o elemento que é último elemento-filho do container.
Se você não sabe qual é o tipo do elemento que é o último-filho use #container > :last-child
Área interativa para E do tipo p conhecido(digite um valor para background-color)
#containerLastChild
Área interativa para elemento último-filho desconhecido(digite um valor para background-color)
#containerLastChildD
E:first-of-type (primeiro filho do tipo E)
Casa com o elemento do tipo E que é o primeiro elemento-filho daquele tipo. Defina cores de fundo para as três regras CSS.
Para "casar" todos os elementos que são os primeiros elementos-filhos independentemente do seu tipo
use #container > :first-of-type.
Depois de fazer suas interações com as cores de fundo recarregue a página e na primeira regra CSS digite uma cor CSS para o background-color. Observe que o primeiro elemento DIV recebeu a cor de fundo. A seguir delete div do seletor div:first-of-type e observe.
Área interativa (digitar valores para background-color)
#containerFirstOfType
E:last-of-type (último filho do tipo E)
Casa com o elemento E que é último elemento-filho do tipo E do container. Defina cores de fundo para as três regras CSS.
Para "casar" todos os elementos que são os últimos elementos-filhos independentemente do seu tipo
use #container > :last-of-type
Depois de fazer suas interações com as cores de fundo recarregue a página e na primeira regra CSS digite uma cor CSS para o background-color. Observe que o último elemento DIV recebeu a cor de fundo. A seguir delete div do seletor div:last-of-type e observe.
Área interativa (digitar valores para background-color)
#containerLastOfType
E:nth-child(an + b❔Digitar o valor an + b dentro do parênteses, sendo a e b número inteiro positivo, negativo ou zero.
Por exemplo: ( 3n + 3), ( -2n + 1 ), ( -n + 3 ), ( 4n ), ( 8 ), etc... e n será automaticamente incrementado de 1. ou even ou odd) ( filhos de um só tipo em determinadas posições)
:nth-child(an + b❔Digitar o valor an + b dentro do parênteses, sendo a e b número inteiro positivo, negativo ou zero.
Por exemplo: ( 3n + 3), ( -2n + 1 ), ( -n + 3 ), ( 4n ), ( 8 ), etc... e n será automaticamente incrementado de 1. ou even ou odd) ( filhos de diferentes tipos em determinadas posições)
an + b dentro do parênteses, sendo a e b número inteiro positivo, negativo ou zero.Por exemplo: ( 3n + 3), ( -2n + 1 ), ( -n + 3 ), ( 4n ), ( 8 ), etc... e n será automaticamente incrementado de 1. ou even ou odd)
an + b dentro do parênteses, sendo a e b número inteiro positivo, negativo ou zero.Por exemplo: ( 3n + 3), ( -2n + 1 ), ( -n + 3 ), ( 4n ), ( 8 ), etc... e n será automaticamente incrementado de 1. ou even ou odd)
Casa com o elemento E que é o elemento-filho ocupando a posição an + b ou posição par (even) ou ainda posição ímpar (odd).
Se existirem diferentes tipos de elementos no container use #container > :nth-child(an + b) para "casar" diferentes elementos nas posições definidas.
Área interativa para E de um só tipo(dentro do parênteses digitar an+b ou even ou odd)
#containerNthChild
Dica: Para esse seletor o valor ( -n + b ) seleciona os b primeiros elementos e o seletor ( n + b ) seleciona todos os elementos menos os b-1 primeiros.
Área interativa para existência de diferentes tipos de elementos no container
- 1- ) dentro do parênteses digitar alguns valores
an+bouevenouodd) e observar. - 2-) Recarregar a página.
- 3-) Digitar
evendentro do parênteses e observar que o "casamento" foi com elementos (independente do tipo) na posição par. - 4-) A seguir antes de você digitar
divno início do seletor:nth-child(even)responda: quais elementos serão "casados"? - 5-) Digite
divno início do seletor:nth-child(even)e confira sua resposta.
Errou ?O seletor div:nth-child(even)) examinou TODOS os elementos dentro do container, independentemente do seu tipo a procura de DIVs na posição PAR. A primeira posição PAR (2) contém o DIV2 e ele foi "casado", a segunda posição par (4) contém o SPAN2 e não há " casamento", a terceira posição PAR (6) contém o DIV3 e ele foi "casado", a quarta posição par (8) contém o P2 e não há " casamento"... e assim por diante.
E:nth-last-child(an + b❔Digitar o valor an + b dentro do parênteses, sendo b número inteiro positivo, negativo ou zero.
Por exemplo: ( 3n + 3), ( -2n + 1 ), ( -n + 3 ), ( 4n ), ( 8 ), etc... e n será automaticamente incrementado de 1. ou even ou odd) (filho de um só tipo em determinadas posições contado de trás para frente)
:nth-last-child(an + b❔Digitar o valor an + b dentro do parênteses, sendo b número inteiro positivo, negativo ou zero.
Por exemplo: ( 3n + 3), ( -2n + 1 ), ( -n + 3 ), ( 4n ), ( 8 ), etc... e n será automaticamente incrementado de 1. ou even ou odd) (filhos de diferentes tipos em determinadas posições contado de trás para frente)
an + b dentro do parênteses, sendo b número inteiro positivo, negativo ou zero.Por exemplo: ( 3n + 3), ( -2n + 1 ), ( -n + 3 ), ( 4n ), ( 8 ), etc... e n será automaticamente incrementado de 1. ou even ou odd)
an + b dentro do parênteses, sendo b número inteiro positivo, negativo ou zero.Por exemplo: ( 3n + 3), ( -2n + 1 ), ( -n + 3 ), ( 4n ), ( 8 ), etc... e n será automaticamente incrementado de 1. ou even ou odd)
Casa com o elemento E que é o elemento-filho ocupando a posição an + b ou posição par (even) ou ainda posição ímpar (odd), todas contadas de trás para frente.
Se existirem diferentes tipos de elementos no container use #container > :nth-last-child(an + b)
Área interativa para E de um só tipo (dentro do parênteses digitar an+b ou even ou odd)
#containerNthLastChild
Dica: Para esse seletor o valor ( -n + b ) seleciona os b últimos elementos e o seletor ( n + b ) seleciona todos os elementos menos os b-1 últimos.
Área interativa para existência de diferentes tipos de elementos no container
- 1- ) dentro do parênteses digitar alguns valores
an+bouevenouodd) e observar. - 2-) Recarregar a página.
- 3-) Digitar
evendentro do parênteses e observar que o "casamento" foi com elementos (independente do tipo) na posição par. - 4-) A seguir antes de você digitar
divno início do seletor:nth-last-child(even)responda: quais elementos serão "casados"? - 5-) Digite
divno início do seletor:nth-last-child(even)e confira sua resposta.
div:nth-last-child(even)) examinou TODOS os elementos dentro do container, independentemente do seu tipo a procura de DIVs na posição PAR contada de trás para frente. A primeira posição PAR (2) contém o DIV19 e ele foi "casado", a segunda posição par (4) contém o SPAN20 e não há "casamento", a terceira posição PAR (6) contém o P19 e não há " casamento", a quarta posição par (8) contém o P18 e não há " casamento" o próximo "casamento" se dá na posição PAR (14) com o DIV16 ... e assim por diante.
#containerNthLastChildD
E:nth-of-type(an + b❔Digitar o valor an + b dentro do parênteses, sendo b número inteiro positivo, negativo ou zero.
Por exemplo: ( 3n + 3), ( -2n + 1 ), ( -n + 3 ), ( 4n ), ( 8 ), etc... e n será automaticamente incrementado de 1. ou even ou odd) ( filho do tipo E em determinadas posições)
an + b dentro do parênteses, sendo b número inteiro positivo, negativo ou zero.Por exemplo: ( 3n + 3), ( -2n + 1 ), ( -n + 3 ), ( 4n ), ( 8 ), etc... e n será automaticamente incrementado de 1. ou even ou odd)
Casa com o elemento-filho do tipo E que ocupa a posição an + b ou posição par (even) ou ainda posição ímpar (odd). Defina alguns valores nos parênteses da área de interação.
Para "casar" todos os elementos-filhos independentemente do seu tipo use #container > :nth-of-type.
Depois de fazer suas interações com valores dentro dos parênteses recarregue a página e na primeira regra CSS digite even dentro do parênteses. Observe que os elementos DIV de ordem par receberam a cor de fundo. A seguir delete div do seletor div:nth-of-type e observe que todos os elementos (DIV, P e SPAN) de ordem par receberam a cor de fundo.
Área interativa (dentro do parênteses digitar an+b ou even ou odd)
#containerNthOfType
E:nth-last-of-type(an + b❔Digitar o valor an + b dentro do parênteses, sendo b número inteiro positivo, negativo ou zero.
Por exemplo: ( 3n + 3), ( -2n + 1 ), ( -n + 3 ), ( 4n ), ( 8 ), etc... e n será automaticamente incrementado de 1. ou even ou odd) (filho do tipo E em determinadas posições contadas de trás para frente)
an + b dentro do parênteses, sendo b número inteiro positivo, negativo ou zero.Por exemplo: ( 3n + 3), ( -2n + 1 ), ( -n + 3 ), ( 4n ), ( 8 ), etc... e n será automaticamente incrementado de 1. ou even ou odd)
Casa com o elemento E que é elemento-filho do tipo E do container e ocupa a posição an + b ou posição par (even) ou ainda posição ímpar (odd) todas contadas de trás para frente. Defina alguns valores nos parênteses da área de interação.
Para "casar" todos os elementos independentemente do seu tipo use #container > :nth-of-type(an + b).
Nota: O comportamento neste caso é semelhante ao observado para o seletor :nth-of-type estudado anteriormente e as interações podem ser feitas da mesma forma que para aquele seletor.
Área interativa (dentro do parênteses digitar an+b ou even ou odd)
#containerNthLastOfType
E:only-child (único filho)
Casa com o elemento E que é o único elemento-filho do container.
Dica: se você não conhece o tipo do elemento que é o único elemento-filho use #container > *:only-child
Área interativa (digitar valores para background-color)
#containerOnlyChild
E:only-of-type (único filho do tipo E)
Casa com o elemento E que é o único elemento-filho do tipo E do container.
Dica: se você não conhece o tipo do elemento que é o único elemento-filho use #container > *:only-of-type
Área interativa (digitar valores para background-color)
#containerOnlyOfType
Pseudoclasses combinadas
Você pode combinar as pseudoclasses para elementos filhos conforme exemplo mostrado a seguir.
div:nth-child(2n):nth-last-child(3n+3) — a primeira parte do seletor "casa" com os elementos DIV de ordem par (DIV2, DIV3, DIV4, etc...) e a segunda "casa" com elementos E de ordem par que ocupam as seguintes posições contadas de trás para frente:
- 3n + 3 = 3x0 + 3 = 3
- 3n + 3 = 3x1 + 3 = 6
- 3n + 3 = 3x2 + 3 = 9
- 3n + 3 = 3x3 + 3 = 12
- 3n + 3 = 3x4 + 3 = 15
- 3n + 3 = 3x5 + 3 = 18
- 3n + 3 = 3x6 + 3 = 21
- 3n + 3 = 3x7 + 3 = 24
- 3n + 3 = 3x8 + 3 = 27
- 3n + 3 = 3x9 + 3 = 30
- 3n + 3 = 3x10 + 3 = 33
- 3n + 3 = 3x11 + 3 = 36
- ...
Notar que as posições 6, 12, 18, 24, 30, 36, ... contadas de trás para frente não foram "casadas", pois elas não correspondem à DIVs de ordem par.
Área interativa (altere à vontade o seletor filho combinado, opcionalmente poderá usar seletor pseudoclasse simples)
#containerCombinadoFaixaPseudoclasses combinadas
Sem dúvida a mais interessante combinação de pseudoclasses é aquela que possibilita que se selecione uma faixa contínua de elementos-filhos.
O seletor que realiza tal seleção é da seguinte forma :nth-child( n + b ):nth-child( -n + c ) — a primeira parte do seletor "casa" com os elementos-filhos a partir do b-ésimo e a segunda "casa" com elementos-filhos desde o b-ésimo até o c-ésimo, ou seja o casamento se dá do b-ésimo até o c-ésimo elemento-filho. Evidentemente b < c para haver casamento e se b = c o casamento é com um único elemento-filho.
Área interativa (altere à vontade os valores de b e c do seletor filho combinado)
#containerCombinadoCompartilhe essa matéria com seus amigos
Conheça os livros do Maujor®
Ir para a página de entrada nos sites dos livros.