В трех разных средах :last-child в моем примере ведет себя по-разному. В браузере на моем компьютере Кот красный, как я и ожидал, Аист - черный, хотя вроде должен быть голубой. Вот в этой песочнице
https://codepen.io Кот - красный, Аист - голубой (как и должно быть по идее). А в этой
https://jsfiddle.net/ и Кот, и Аист черные, т.е. на них вообще не действуют псевдоклассы.
html
<body>
<span>Кот</span>
<div>
<span>Собака</span>
<span>Бегемот</span>
<i>Тигр</i>
<span>Антилопа</span>
</div>
<span>Носорог</span>
<div>
<span>Жираф</span>
<i>Чупакабра</i>
<span>Крокодил</span>
<span>Пантера</span>
</div>
<div>
<span>Слон</span>
</div>
<span>Аист</span>
</body>
css
span:first-child {
color: red;
}
span:last-child {
color: aqua;
}
