Find first CSS class on page

Question

I have a page full of elements. I simply just want to match the first element in my CSS selector.

I have tried sibling selector, first-child and first-of-type but they all only work in a structure where there are siblings. In my case I have different depths which makes it harder.

.match ~ .match {
  background:red;
}

.match:first-child {
  background: green;
}

.match:first-of-type {
  background: yellow;
}

<div>
  <ul>
    <li>List item</li>
  </ul>
  <div>
    <div class="match">Match - First match should be red</div>
  </div>
  <div class="match">Match</div>
  <button></button>
  <div>
    <div>
      <div class="match">Match</div>
    </div>
  </div>
</div>

It should find the first element with the class .match.

I will not accept answers like div > div > .match because then it does not find the element because we tell it where to look.