Выбрать первый и последний дочерний элемент родителя можно с помощью псевдоклассов :first-child и :last-child.
Пример, выбираем первый и последний элемент списка:
li:first-child {}
li:last-child {}
С помощью псевдокласса :first-of-type можно выбирать первый дочерний элемент родителя (похоже на :first-child), но с учетом типа. А с помощью псевдокласса :last-of-type можно аналогично выбрать последний дочерний элемент родителя с учетом типа.
<div>
<span>Some header</span>
<ul><li>1 red</li></ul>
<ul><li>2</li></ul>
<ul><li>3 blue</li></ul>
<span>Some footer</span>
</div>
...
ul:first-of-type {color: red;}
ul:last-of-type {color: blue;}
В примере, обычной выборке ul без типа мешают дополнительные блоки span в родительском для ul блоке.
Существует также псевдокласс :only-child, он позволяет выбрать элементы, которые являются единственными дочерними.
<div>
<p>Only-child</p>
</div>
<div>
<p>Not only-child</p>
<p>Not only-child</p>
</div>
А также :only-of-type, похожий на предыдущий, но затрагивает элементы, не имеющие соседей такого типа в пределах родительского элемента.
Итого таких пседвоклассов 6: :first-child, :last-child,:first-of-type, :last-of-type, :only-child, :only-of-type.
