Galera, me deparei com esse CSS de um projeto free que baixei da web.
.user-panel>.image>img {}
- O que essa notação "aninhada" representa?
- Porque o "img" não tem o ponto (.)?
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="..." />
+1
em tudo lá nessas respostas. Com os links aqui que colocaste na pergunta fica tudo organizado.
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: