I'm giving a CSS training, and even after reading and listening on the theme I'm still having some difficulties in realizing why: first-child is a pseudo class and not a pseudo element such as :: first-line, :: first-letter, etc.
Some examples that will clarify me?
The pseudo classes that represent interactions / states perceive themselves well, this is what I got through as: nth-child () and the like.
It's because :first-child does not point to a child element in your selector, but 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>
a:first-child indicates that the first <a> of parent <div> should be red.
a:first-child{
color: red;
}<div>
<a href="">Link 1</a>
<a href="">Link 2</a>
</div>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>