AS 10 pseudoclasses para elementos-filhos

visualizações Publicado em: 30/11/2016— Revisão em: ➠ 02/10/2017

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. Em caso de dúvida poste nos comentários.

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

  1. 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.

  2. a segunda subarea tem o fundo na cor CSS marron. 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:

    container
    DIV8
                 

    P16

                 SPAN5

    Para 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

    DIV423
                 

    P47

                  SPAN56

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 (você sabe que o primeiro filho é um elemento do tipo E )
:first-child (você não sabe qual é o tipo do elemento que é o primeiro filho)

Casa com o elemento que é 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 E do tipo p conhecido(digitar valor para background)

#containerFirstChild

P1

P2

P3

P4

P5

P6

P7

P8

P9

P10

P11

P12

Área interativa para elemento primeiro-filho desconhecido(digitar valor para background)

#containerFirstChildD
SPAN1
DIV1
DIV2
SPAN2 SPAN3
DIV3

P1

P2

DIV4
DIV5
SPAN4

P3

SPAN5

E:last-child (você sabe que o último filho é um elemento do tipo E )
:last-child (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(digitar valor para background)

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

Área interativa para elemento último-filho 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.

Área 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.

Área 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ú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 + bDigitar 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)

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
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.

Área interativa para existência de diferentes tipos de elementos no container

  1. 1- ) dentro do parênteses digitar alguns valores an+b ou even ou odd) e observar.
  2. 2-) Recarregar a página.
  3. 3-) Digitar even dentro do parênteses e observar que o "casamento" foi com elementos (independente do tipo) na posição par.
  4. 4-) A seguir antes de você digitar div no início do seletor :nth-child(even) responda: quais elementos serão "casados"?
  5. 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ú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 + bDigitar 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)

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
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.

Área interativa para existência de diferentes tipos de elementos no container

  1. 1- ) dentro do parênteses digitar alguns valores an+b ou even ou odd) e observar.
  2. 2-) Recarregar a página.
  3. 3-) Digitar even dentro do parênteses e observar que o "casamento" foi com elementos (independente do tipo) na posição par.
  4. 4-) A seguir antes de você digitar div no início do seletor :nth-last-child(even) responda: quais elementos serão "casados"?
  5. 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ú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)

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
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ú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)

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
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

Área 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

Área 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

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:

  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.

Área interativa (altere à vontade o seletor filho combinado, opcionalmente poderá usar seletor pseudoclasse simples)

#containerCombinadoFaixa
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

Pseudoclasses 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)

#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