why can’t first-of-type use the first of my footnotes?

You need to wrap the text (An example<i>¹</i> sentence with some<i>²</i> notes.) in a tag, for example, in a span, in order to ignore it in css when referring to the first i.note.

You can refer to the second selector like this:

article p:not(span) > i.note:first-of-type {
  color:red;
}

article p:not(span) > i.note:first-of-type {
  color:red;
}

<article>
  <p>
    <span>An example<i>¹</i> sentence with some<i>²</i> notes.</span> 
    <i class="note">1. Some information.</i>
    <i class="note">2. Some more information.</i>
  </p>
</article>