Seletores CSS - As pseudoclasses - first-of-type e :last-of-type
Colaboração: Maurício (Maujor) Samy Silva
Data de Publicação: 07 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 as pseudoclasses :first-of-type
e :last-of-type
NOTA: Nessa dica o que dissermos para o primeiro elemento-filho vale também para o último elemento-filho, considerando que
:first-of-type
significa primeiro elemento-filho de determinado tipo e :last-of-type
significa último elemento-filho de determinado tipo.
Essas pseudoclasses se destinam a selecionar o elemento que seja o primeiro elemento-filho de determinado tipo.
As sintaxes possíveis são mostradas a seguir:
/* Seleciona o primeiro elemento-filho do tipo E */ #container > E:first-of-type { ... } /* Seleciona o primeiro elemento-filho de cada tipo */ #container > :first-of-type { ... }
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 elementos-filhos de um container cuja ID
é
#maujorContainer
que são os possíveis alvos para as regras CSS que
você digitar.
Por exemplo: digite p antes de :first-of-type e yellow depois de background:. Digite e altere à vontade. Aprenda divertindo-se.
Dúvidas? Poste nos comentários.
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.