você está aqui: Home  → Arquivo de Mensagens

Seletores CSS - Combinando pseudoclasses

Colaboração: Maurício (Maujor) Samy Silva

Data de Publicação: 25 de outubro de 2017

Pseudoclasse é um tipo de seletor CSS que permite seleção baseada em informações não contidas explicitamente na árvore do documento. A sintaxe de um seletor do tipo pseudoclasse consiste em um seletor simples seguido de dois pontos (:) e o nome da pseudoclasse. Nessa dica mostraremos como combinar duas pseudoclasses com a finalidade de selecionar uma faixa elementos-filhos de um container.

Problema: sendo conhecida uma lista de items selecionar e estilizar de forma personalizada a faixa de itens do 4o. item ao 9o. item.

A pseudoclasse :nth-child( n + B ) seleciona todos os elementos-filhos de um container a partir daquele que ocupa a posição B. Por exemplo: em uma lista de 10 itens o seletor :nth-child( n + 4 ) seleciona do quarto item até o décimo item (último item da lista). Lembre-se que n varia de 0 (zero) ao infinito.

A pseudoclasse :nth-child( -n + B ) seleciona todos os elementos-filhos de um container a partir daquele que ocupa a posição B, mas nesse caso como n é negativo a contagem é regressiva e em consequência a seleção se dá de trás para frente. Por exemplo: em uma lista de 10 itens o seletor :nth-child( -n + 9 ) seleciona do nono item até o primeiro item.

Assim, se eu combinar os dois seletores dos exemplos anteriores :nth-child( n + 4 ):nth-child( -n + 9 ) a primeira seleção será do quarto item até o final e a segunda do nono item até o primeiro. A interseção será do quarto ao nono.

A segunda seleção poderia ser com :nth-last-child( n + 2 )?

Sim poderia. Contudo assim fazendo, o seletor deixaria de funcionar se forem acrescidos mais itens na lista. À maneira anterior a seleção não muda com o acréscimo de itens.

Exemplo interativo

A seguir são mostradas duas áreas. A primeira com fundo na cor preta é para edição de CSS, em consequência nela você poderá digitar CSS e a segunda mostra os itens elementos-filhos de uma lista ordenada cujaID é #maujorContainer, para você selecionar algumas faixas de itens.

Por exemplo: experimente completar a digitação conforme mostrado a seguir:

#maujorContainer >  :nth-child( n + 4 ):nth-child( -n + 9 )  {
background: yellow;
 }

Digite e altere à vontade. Aprenda divertindo-se.

Dúvidas? Poste nos comentários.

  1. Item 1
  2. Item 2
  3. Item 3
  4. Item 4
  5. Item 5
  6. Item 6
  7. Item 7
  8. Item 8
  9. Item 9
  10. Item 10
  11. Item 11
  12. Item 12
  13. Item 13
  14. Item 14
  15. Item 15

Sobre o autor

Maurício Samy Silva também conhecido como "Dinossauro das CSS" ou simplesmente Maujor® é graduado em Engenharia Civil pelo Instituto Militar de Engenharia (IME).

No segundo semestre de 2003, com a pretensão de suprir a falta de material de consulta gratuita, em língua portuguesa, na internet, decidiu criar o site de tutoriais denominado Maujor, hospedado em http://www.maujor.com/ e destinado a divulgar as técnicas de desenvolvimento frontend. Maujor é autor de 15 livros de desenvolvimento web (http://livrosdomaujor.com.br) e está escrevendo mais um sobre CSS Grid Layout com previsão de lançamento em novembro de 2017.

Saiba mais: Facebook , Twitter.



Veja a relação completa dos artigos de Maurício (Maujor) Samy Silva

 

 

Opinião dos Leitores

Maujor
25 Out 2017, 09:24
@Angelo Rodrigues
Desculpas pelo comentário anterior.
Você está certo. Vamos providenciar a correção.
Maujor
25 Out 2017, 09:09
@Angelo Rodrigues.
Obrigado pelo comentário, mas nada está faltando.
Se você fizer algumas experiências completando o campo interativo com fundo na cor preta verá que está tudo OK.
Angelo Rodrigues
25 Out 2017, 08:45
Na parte abaixo, acredito estar faltando o sinal de menos (-n + 9), não está??

Por exemplo: em uma lista de 10 itens o seletor :nth-child( n + 9 ) seleciona do nono item até o primeiro item.
*Nome:
Email:
Me notifique sobre novos comentários nessa página
Oculte meu email
*Texto:
 
  Para publicar seu comentário, digite o código contido na imagem acima
 


Powered by Scriptsmill Comments Script