Why does first-of-type not target the first of my footnotes?

user_11256647 0
Viewed 51

I don't understand why the above is not making the text red.

Here is a link to my project: www.jordy.news

article p i.note:first-of-type {
  color:red;
}
<article>
  <p>
    An example<i>¹</i> sentence with some<i>²</i> notes.
    <br><br>
    <i class="note">1. Some information.</I>
    <br>
    <i class="note">2. Some more information.</i>
  </p>
</article>

css html
2 Answers

first-of-type means exactly that. It doesn't mean first-of-everything-else-the-selector-says.

The first element of type i in the paragraph is <i>¹</i>, which doesn't match the .note part of the selector.

Dorward_190680

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>

user_135734440
Related