HTML\CSS → Селекторы на основе порядка

Выбрать первый и последний дочерний элемент родителя можно с помощью псевдоклассов :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.