У псевдо-класса :first-child есть один нюанс, про который в учебниках как-то не особо упоминают. А точнее, два нюанса.
Первый: слово child вводит в заблуждение русскоязычных. Ни о каком ребёнке там речь не идёт. Речь идёт о братьях-сёстрах - тэгах, стоящих на одном уровне.
Например, есть код:
И нужно покрасить зелёным только единицу. Можно подумать, что раз div'ы с классом "element" - дети div'а с классом "block", - то команду :first-child надо применять к классу "block" - ".block :first-child { color: green; }" - типа, найди кого-то с классом "block" и его первому ребёнку сделай цвет текста "зелёный". А вот и нет. Команду нужно применять к div'у с классом "element" - ". element:first-child { color: green; }" .
Второй нюанс: :first-child сработает, только если тэг с таким классом является первым из братьев (или сестёр).
Чуть изменим код - добавим тэг абзаца:
И всё - команда ". element:first-child { color: green; }" не работает. Потому, что у первого брата - тэга <p> - нет класса "element".
Добавляем:
и работатает.
Ну и с :last-child всё аналогично, только речь о последнем из братьев-сестёр тэгов.