Why is :first-Child a pseudo class?

Question

I’m giving a training in CSS, and even after reading and listening on the topic I’m still having some difficulty understanding why :first-Child is a pseudo class and not a pseudo element, like ::first-line, ::first-Letter, etc.

Some example that might enlighten me?

The pseudo classes that represent interactions/states are well understood, this is what I was crossed such as :Nth-Child() and similar.

Answer 1

It is because the :first-child does not point to a child element of its selector, but rather that your selector is the first child of your parent element. For example:

a:first-child{
    color: red;
}

<div>
   <a href="">Link 1</a>
   <a href="">Link 2</a>
</div>

The a:first-child indicates that the first <a> of the parent element <div> shall be red in colour.

a:first-child{
    color: red;
}

<div>
   <a href="">Link 1</a>
   <a href="">Link 2</a>
</div>

Already the pseudo-elements point to child elements of the selector:

div::first-line{
    color: red;
}

<div>
   Foo
   <br />
   Foo2
</div>

In the example above, the first line of div must be red.

div::first-line{
    color: red;
}

<div>
   Foo
   <br />
   Foo2
</div>