você está aqui: Home  → Arquivo de Mensagens

Seletores CSS - As pseudoclasses :only-child e :only-of-type

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

Data de Publicação: 16 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 :only-child e :only-of-type

Essas pseudoclasses se destinam a selecionar um elemento-filho único de um container.

A pseudoclasse :only-child seleciona quando o container tem um só elemento-filho.

A pseudoclasse:only-of-type seleciona quando o container tem vários elementos-filhos, mas um só elemento-filho de determinado tipo.

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 dois containers cujas ID são #maujorContainer1 e #maujorContainer2 que são os possíveis alvos para as regras CSS que você digitar.

Experimente as seguintes regras CSS:

  • #maujorContainer1 > > p:only-child { background: yellow; }
  • #maujorContainer1 > > :only-child { background: yellow; }
  • #maujorContainer1 > > p:only-of-type { background: yellow; }
  • #maujorContainer1 > > em:only-of-type { background: yellow; }
  • #maujorContainer1 > > span:only-of-type { background: yellow; }
  • #maujorContainer2 > > :only-child { background: yellow; }
  • #maujorContainer2 > > p:only-child { background: yellow; }
  • #maujorContainer2 > > span:only-child { background: yellow; }

Nem todas as regras casam com um alvo. Descubra onde será o casamento antes de digitar a cor do fundo.

Digite e altere à vontade. Aprenda divertindo-se.

Dúvidas? Poste nos comentários.

P1

P2

DIV1

P3

SPAN1

P1

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

Seja o primeiro a comentar este artigo
*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