Pseudo Selector Questions

I wonder if someone could (simply and concisely) explain to me the differences between a first-child selector and a first-of-type selector, because at first glance these seem to target the same elements.


My understanding is that if you have

<div id="example">
    <h2>Section subheading</h2>
    <p>Another paragraph</p>

Then using :first-child, you can target the <h2> but not the <p>s, because neither is the first child of the <div>. But with :first-of-type, you can target the first <p> as well as the <h2>, because it is the first <p> within the <div>.

Stevie, it seems so simple when you explain it like that. I’m beginning to think I’m to old for all this.
Does anyone remember when design was produced with the aid of Bromides, and the Web was something to do with Spiderman?

But seriously, thanks very much.