Как выбрать первый и последний элементы?

Question

[Сергей Пуговкин]

<ul class="pagination m-0">
<li class="page-item disabled"><span class="page-link bg-inverse text-muted">«</span></li>
<li class="page-item active"><a class="page-link m-0 bg-inverse text-warning" href="/1" data-page="0">1</a></li>
<li class="page-item"><a class="page-link m-0 bg-inverse text-warning" href="/2" data-page="1">2</a></li>
<li class="page-item"><a class="page-link m-0 bg-inverse text-warning" href="/3" data-page="2">3</a></li>
<li class="page-item"><a class="page-link m-0 bg-inverse text-warning" href="/4" data-page="3">4</a></li>
<li class="page-item"><a class="page-link m-0 bg-inverse text-warning" href="/5" data-page="4">5</a></li>
<li class="page-item"><a class="page-link m-0 bg-inverse text-warning" href="/30" data-page="29">»</a></li>
</ul>

Как с помощью css выбрать первый page-link и последний?

Код вида:

.pagination .page-item .page-link:first-of-type {
...
}

выбирает все элементы.

Answer 1

[Сергей Пуговкин]

Ааа, блин, тупанул... вот же как надо:

.pagination .page-item:first-of-type .page-link

Answer 2

[GreatRash]

.page-item:last-child .page-link {
  background-color: #fcc;
}