Примеры использования псевдоклассов CSS для задания стилей первому, последнему и других вариаций элементов в списках, например <ul> <li>:
<ul>
<li>Элемент списка</li>
<li>Элемент списка</li>
<li>Элемент списка</li>
<li>Элемент списка</li>
<li>Элемент списка</li>
</ul>:first-child – находит элемент, который расположен первым в родительском элементе.
ul li:first-child {
color: red;
}Пример:
ul li:not(:first-child) {
color: red;
}Пример:
:last-child – элемент, который расположен последним в родительском элементе.
ul li:last-child {
color: red;
}Пример:
ul li:not(:last-child) {
color: red;
}Пример:
ul li:first-child, ul li:last-child {
color: red;
}Пример:
ul li:not(:first-child):not(:last-child) {
color: red;
}Пример:
ul li:nth-child(2) {
color: red;
}Пример:
:nth-last-child(n) находит элемент в обратном порядке, с конца списка элементов.
ul li:nth-last-child(2) {
color: red;
}Пример:
ul li:not(:nth-last-child(2)) {
color: red;
}
