Difference between hover syntaxes

What is the difference between these two different hover selector syntaxes?

#id:hover p
#id p:hover

solution

#id:hover p - will select a descendant p element when hovering over the parent #id element.

#id p:hover - will select a descendant p element (a descendant of an #id element) when it is being hovered over.

Take this for example:

.example1:hover p,
.example2 p:hover {
  color: red;
}
div {
  border: 1px solid;
}
div p {
  border: 1px solid #f00;
}
<div class="example1">
  <p>.example1:hover p</p>
  <p>The p element is styled when hovering over the parent.</p>
</div>

<div class="example2">
  <p>.example2 p:hover</p>
  <p>The p element is styled when hovering over the p element</p>
</div>