When should I use . or # to apply the new element?

In this task, would some kind people tell me, why should we use “#” before thumbnail instead of “.” ?
When should I use “#”?

#thumbnail
{

}

instead of

.thumbnail
{

}

I ussually go with the . but, some apps are more demading for the #
Also could you put a link to the challenge next time instead of a screenshot?

. is for classes, # is for id

usually you use classes to style via css, and id (which must be unique in the document) to manipulate elements with javascript

<img id="an-id" class="a-class" ... >

this img element can be selected using the class selector .a-class or the id selector #an-id

The FCC challenges tend to make you use # because it’s easier for the tests to handle. That should probably be fixed. Best practice in CSS these days is to use . (a dot) to match the class, even if there’s just one element using that class.

You’d match the id using # when you have JavaScript that can only target a single element, such as ReactDom.render