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 (.)?
Stack Overflow em Português é um site de perguntas e respostas para programadores profissionais e entusiastas. Leva apenas um minuto para se inscrever.
Inscreva-se para participar desta comunidadeOs 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: