What does ">" mean in CSS selectors?

Question

Guys, I came across this CSS from a free project that I downloaded from the web.

.user-panel>.image>img {}

1. What this "nested" notation represents?
2. Because the "img" doesn’t have the point (.)?

Answer 1

Dots are used for classes. HTML elements are only used with their name. The symbol > meaning immediate descendant.

Other ways to read this selector would be like this:

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

CSS rules will be applied to the element only img that respects this HTML hierarchy/structure.

In HTML it could be:

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

Answer 2

This dial means:

Select all elements with the class .user-panel, then select all direct children with the class .image, then select all direct children who are the tag img.

That is to say:

• .user-panel: Selector per class
• >: Direct descending indicator (child)
• .image: Selector per class
• >: Direct descending indicator (child)
• img: Tag selector

References:

• Selector per class
• Element>Element
• Tag selector