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