0

Galera, me deparei com esse CSS de um projeto free que baixei da web.

.user-panel>.image>img {}
  1. O que essa notação "aninhada" representa?
  2. Porque o "img" não tem o ponto (.)?
0

2 Respostas 2

3

Os pontos são usados para classes. Os elementos HTML usam-se só com o seu nome. O simbolo > quer dizer descendente imediato.

Outras maneiras de ler esse seletor seria assim:

elemento com classe "user-panel" 
    que tem um descendente direto 
        elemento com classe "image"
            que tem um descendente direto
                elemento HTML "img"

As regras de CSS serão aplicadas somente ao elemento img que respeita esse hierarquia/estrura de HTML.

Em HTML poderia ser:

<div class="user-panel">
    <div class="image">
       <img src="..." />
2
1

Este seletor quer dizer:

Selecione todos elementos com a classe .user-panel, depois selecione todos filhos diretos com a classe .image, depois selecione todos os filhos diretos que sejam a tag img.

Ou seja:

  • .user-panel: Seletor por classe
  • >: Indicador de descendente direto (filho)
  • .image: Seletor por classe
  • >: Indicador de descendente direto (filho)
  • img: Seletor por tag

Referências:

1

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .