What does the dot mean in the following multiple selector code

Question

.hotdog p.mustard {
  background: yellow;
}

I'm talking about the dot between p and mustard

Answer 1

That's the class selector, it selects each p element with the class mustard. In this case it will only select those if they are a descendant of an element with the hotdog class.

Answer 2

.hotdog {
  background: orange;
  padding: 10px;
}
.hotdog.chilli {
  background: brown;
}
.hotdog .ketchup {
  background: red;
}
.hotdog p.mustard {
  background: yellow;
}

<div class="hotdog">
  hot diggidy dog
  <p class="ketchup">ketchup</p>
  <p class="mustard">mustard</p>
</div>

<div class="hotdog chilli">
  chilli dog??
</div>