How a delimiter(space) between `form` and `:hover` as in " form :hover { property:value } " in CSS applies styling to all elements of a form?

Question

I came across the :active element in CSS. This is the Mozilla documentation page of :active element. https://developer.mozilla.org/en-US/docs/Web/CSS/:active

They have used this example

form :active {
  color: red;
}

form button {
  background: white;
}

<form>
  <label for="my-button">My button: </label>
  <button id="my-button" type="button">Try Clicking Me or My Label!</button>
</form>

I cannot clearly understand why :active element applies to all of the form elements by giving a delimiter(space) between form and :active as in form :active. How does CSS apply this principle?

Answer 1

Because when you divide css selector with space, you go deeper into element hierarchy.

form :active {
  color: red;
}

That record applies this style to every particular active element in form, including descendants.