Pseudo-classes para elementos-filhos

visualizações Publicado em: 30/11/2016

Introdução

As Recomendações do W3C para Seletores nível 3 preveem 10 (dez) pseudo-classes estruturais para "casar" (selecionar) elementos-filhos de um container.
A existência e uso dessas pseudo-classes 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 também padrão que são de uso pouco comum.

Para tirar o máximo proveito das UI de interação existentes neste tutorial bem como entender com detalhes o funcionamento de cada pseudo-classe 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. Em caso de dúvida poste nos comentários.

Nesse tutorial apresentamos e explicamos o "casamento" de cada um dessas pseudo-classes e ainda fornecemos uma interface interativa para você estudar e tornar-se um expert na seleção CSS
de elementos-filhos.

Instruções de uso da interface interativa

Existem interfaces interativas, para cada uma das 10 pseudo-classes estudadas nesse tutorial. As interfaces são constituidas de duas áreas: a primeira área com fundo na cor preta é editável e você pode digitar regras CSS, declarações CSS, valores CSS e/ou seletores CSS naquela área. Ao concluir a digitação o efeito de estilização será imediatamente aplicado na segunda área com fundo na cor CSS marron logo a seguir (área de aplicação do efeito).

Na área de edição já constam regras de estilo com declarações incompletas a serem preenchidas por você. Dependendo da pseudo-classe estudada você deverá digitar uma cor CSS para o fundo, ou digitar um valor
an + b dentro do parênteses, sendo a e b números inteiros positivos ou negativos ou zero, conforme sintaxe prevista nas epecificações 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.

A área de aplicação do efeito é constituida de um container e elementos-filhos de três tipos, DIV, P e SPAN representados por símbolos. Esses elementos foram posicionados na horizontal (inline) e receberam um rótulo com o nome do elemento seguido por um número designando sua posição sequencial na marcação, conforme exemplos mostrados a seguir:

container
DIV8
             

P16

             SPAN5

Para as pseudo-classes que "casam" em contagem de trás para frente, foi inserido também um número designando sua posição sequencial na marcação, contada de trás para frente conforme exemplos a seguir:

container

DIV423
             

P47

              SPAN56

As 10 pseudo-classes

🙋 Vamos começar os estudos! 🙌

E:first-child (primeiro filho, tipo do elemento E conhecido)
:first-child (primeiro filho, tipo do elemento E desconhecido)

Casa com o elemento E que é primeiro elemento-filho do container.
Se você não conhece o tipo do elemento E que é o primeiro-filho use #container > :first-child

Interface interativa para E do tipo conhecido(digitar valor para background)

#containerFirstChild

P1

P2

P3

P4

P5

P6

P7

P8

P9

P10

P11

P12

Interface interativa para E do tipo desconhecido(digitar valor para background)

#containerFirstChildD
SPAN1
DIV1
DIV2
SPAN2 SPAN3
DIV3

P1

P2

DIV4
DIV5
SPAN4

P3

SPAN5

E:last-child (último filho, tipo do elemento E conhecido)
:last-child (último filho, tipo do elemento E desconhecido)

Casa com o elemento E que é o último elemento-filho do container.
Se você não conhece o tipo do elemento que é o último filho use #container > :last-child

Interface interativa para E do tipo conhecido (digitar valor para background)

#containerLastChild
DIV1
DIV2
DIV4
DIV5
DIV6
DIV7
DIV8
DIV9
DIV10
DIV11
DIV12
DIV13
DIV14

Interface interativa para E do tipo desconhecido(digitar valor para background)

#containerLastChildD
DIV3

P1

P2

SPAN1
DIV1
SPAN3
DIV4
SPAN4
DIV5
DIV2
SPAN2 SPAN5

P3

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. Observe que o primeiro elemento DIV recebeu a cor de fundo. A seguir delete div do seletor div:first-of-type e observe.

Interface interativa (digitar valores para background)

#containerFirstOfType
SPAN1 SPAN2 SPAN3
DIV1
DIV2
DIV3
DIV4
DIV5

P1

P2

SPAN4

P3

P4

SPAN5

P5

DIV6
DIV7
DIV8

P6

SPAN6 SPAN7 SPAN8 SPAN9
DIV9

P7

P8

DIV10
SPAN10 SPAN11

P9

SPAN12 SPAN13

P10

SPAN14 SPAN15 SPAN16

P11

DIV11
DIV12

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. Observe que o último elemento DIV recebeu a cor de fundo. A seguir delete div do seletor div:last-of-type e observe.

Interface interativa (digitar valores para background)

#containerLastOfType
DIV1
DIV2
SPAN1 SPAN2 SPAN3
DIV3

P1

P2

DIV4
DIV5
SPAN4

P3

P4

SPAN5

P5

DIV6
DIV7
DIV8

P6

SPAN6 SPAN7 SPAN8 SPAN9
DIV9

P7

P8

DIV10
DIV11
SPAN10 SPAN11

P9

SPAN12
DIV12
SPAN13

P10

P11

SPAN14 SPAN15 SPAN16

E:nth-child(an + bDigitar o valor an + b dentro do parênteses, sendo a e b números inteiros positivos ou negativos 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 + bDigitar o valor an + b dentro do parênteses, sendo a e b números inteiros positivos ou negativos 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)

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.

Interface interativa para E de um só tipo(dentro do parênteses digitar an+b ou even ou odd)

#containerNthChild
SPAN1 SPAN2 SPAN3 SPAN4 SPAN5 SPAN6 SPAN7 SPAN8 SPAN9 SPAN10 SPAN11 SPAN12 SPAN13 SPAN14 SPAN15 SPAN16 SPAN17 SPAN18 SPAN19 SPAN20 SPAN21 SPAN22 SPAN23 SPAN24 SPAN25 SPAN26

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.

Interface interativa para existência de diferentes tipos de elementos no container

1- ) dentro do parênteses digitar alguns valores an+b ou even ou odd) e observar.
2-) Recarregar a página.
3-) Digitar even dentro 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 div no início do seletor :nth-child(even) responda: quais elementos serão "casados"?
5-) Digite div no 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. #containerNthChildD
DIV1
DIV2
SPAN1 SPAN2 SPAN3
DIV3

P1

P2

DIV4
DIV5
SPAN4

P3

P4

SPAN5

P5

DIV6
DIV7
DIV8

P6

SPAN6 SPAN7 SPAN8 SPAN9
DIV9

P7

P8

DIV10
SPAN10 SPAN11

P9

SPAN12 SPAN13

P10

SPAN14 SPAN15 SPAN16

P11

DIV11
DIV12
DIV13
DIV14

P12

P13

P14

P15

DIV15
DIV16
DIV17
SPAN17 SPAN18

P16

P17

P18

SPAN19

P19

P20

SPAN20
DIV18
DIV19
DIV20

E:nth-last-child(an + bDigitar o valor an + b dentro do parênteses, sendo b números inteiros positivos ou negativos 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 + bDigitar o valor an + b dentro do parênteses, sendo b números inteiros positivos ou negativos 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)

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)

Interface interativa para E de um só tipo (dentro do parênteses digitar an+b ou even ou odd)

#containerNthLastChild
DIV126
DIV225
DIV324
DIV423
DIV522
DIV621
DIV720
DIV819
DIV918
DIV1017
DIV1116
DIV1215
DIV1314
DIV1413
DIV1512
DIV1611
DIV1710
DIV189
DIV198
DIV207
DIV216
DIV225
DIV234
DIV243
DIV252
DIV261

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.

Interface interativa para existência de diferentes tipos de elementos no container

1- ) dentro do parênteses digitar alguns valores an+b ou even ou odd) e observar.
2-) Recarregar a página.
3-) Digitar even dentro 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 div no início do seletor :nth-last-child(even) responda: quais elementos serão "casados"?
5-) Digite div no início do seletor :nth-last-child(even) e confira sua resposta.
Errou ?O seletor 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
DIV120
DIV219
SPAN120 SPAN219 SPAN318
DIV318

P120

P219

DIV417
DIV516
SPAN417

P318

P417

SPAN516

P516

DIV615
DIV714
DIV813

P615

SPAN615 SPAN714 SPAN813 SPAN912
DIV912

P714

P813

DIV1011
SPAN1011 SPAN1110

P912

SPAN129 SPAN138

P1011

SPAN147 SPAN156 SPAN165

P1110

DIV1110
DIV129
DIV138
DIV147

P129

P138

P147

P156

DIV156
DIV165
DIV174
SPAN174 SPAN183

P165

P174

P183

SPAN192

P192

P201

SPAN201
DIV183
DIV192
DIV201

E:nth-of-type(an + bDigitar o valor an + b dentro do parênteses, sendo b números inteiros positivos ou negativos 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)

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.

Interface interativa (dentro do parênteses digitar an+b ou even ou odd)

#containerNthOfType
DIV1
DIV2
SPAN1 SPAN2 SPAN3
DIV3

P1

P2

DIV4
DIV5
SPAN4

P3

P4

SPAN5

P5

DIV6
DIV7
DIV8

P6

SPAN6 SPAN7 SPAN8 SPAN9
DIV9

P7

P8

DIV10
SPAN10 SPAN11

P9

SPAN12 SPAN13

P10

SPAN14 SPAN15 SPAN16

P11

DIV11
DIV12
DIV13
DIV14

P12

P13

P14

P15

DIV15
DIV16
DIV17
SPAN17 SPAN18

P16

P17

P18

SPAN19

P19

P20

SPAN20
DIV18
DIV19
DIV20

E:nth-last-of-type(an + bDigitar o valor an + b dentro do parênteses, sendo b números inteiros positivos ou negativos 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)

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.

Interface interativa (dentro do parênteses digitar an+b ou even ou odd)

#containerNthLastOfType
DIV110
DIV29
SPAN110 SPAN29 SPAN38
DIV38

P110

P29

DIV47
DIV56
SPAN47

P38

P47

SPAN56

P56

DIV65
DIV74
DIV83

P65

SPAN65 SPAN74 SPAN83 SPAN92
DIV92

P74

P83

DIV101
SPAN101

P92

P101

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

Interface interativa (digitar valores para background)

#containerOnlyChild

P1

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

Interface interativa (digitar valores para background)

#containerOnlyOfType
DIV1
DIV2
SPAN1 SPAN2 SPAN3
DIV3

P1

P2

DIV4
DIV5
SPAN4

P3

P4

SPAN5

P5

DIV6
DIV7
DIV8

P6

SPAN6 SPAN7 SPAN8 SPAN9
DIV9

P7

P8

DIV10
SPAN10 SPAN11

P9

SPAN12 SPAN13

P10

SPAN14 SPAN15 SPAN16

P11

DIV11
DIV12
DIV13
DIV14

P12

P13

P14

P15

DIV15
DIV16
DIV17
SPAN17 SPAN18

P16

P17

P18

SPAN19

P19

P20

SPAN20
DIV18
DIV19
DIV20

Pseudo-classes combinadas

Você pode combinar as pseudo-classes 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:

  1. 3n + 3 = 3x0 + 3 = 3  ❁  
  2. 3n + 3 = 3x1 + 3 = 6  ❁  
  3. 3n + 3 = 3x2 + 3 = 9  ❁  
  4. 3n + 3 = 3x3 + 3 = 12  ❁  
  5. 3n + 3 = 3x4 + 3 = 15  ❁  
  6. 3n + 3 = 3x5 + 3 = 18  ❁  
  7. 3n + 3 = 3x6 + 3 = 21  ❁  
  8. 3n + 3 = 3x7 + 3 = 24  ❁  
  9. 3n + 3 = 3x8 + 3 = 27  ❁  
  10. 3n + 3 = 3x9 + 3 = 30  ❁  
  11. 3n + 3 = 3x10 + 3 = 33  ❁  
  12. 3n + 3 = 3x11 + 3 = 36  ❁  
  13. ...

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.

Interface interativa (altere à vontade o seletor filho combinado, opcionalmente poderá usar seletor pseudo-classe simples)

#containerCombinado
DIV150
DIV249
DIV348
DIV447
DIV546
DIV645
DIV744
DIV843
DIV942
DIV1041
DIV1140
DIV1239
DIV1338
DIV1437
DIV1536
DIV1635
DIV1734
DIV1833
DIV1932
DIV2031
DIV2130
DIV2229
DIV2328
DIV2427
DIV2526
DIV2625
DIV2724
DIV2823
DIV2922
DIV3021
DIV31120
DIV3219
DIV3318
DIV3417
DIV3516
DIV3615
DIV3714
DIV3813
DIV3912
DIV4011
DIV4110
DIV429
DIV438
DIV447
DIV456
DIV465
DIV474
DIV483
DIV492
DIV501