Выборка элементов в группе по псевдоклассам CSS

Примеры использования псевдоклассов CSS для задания стилей первому, последнему и других вариаций элементов в списках, например <ul> <li>:

<ul>
	<li>Элемент списка</li>
	<li>Элемент списка</li>
	<li>Элемент списка</li>
	<li>Элемент списка</li>
	<li>Элемент списка</li>
</ul>
HTML

:first-child – находит элемент, который расположен первым в родительском элементе.

ul li:first-child {
	color: red;
}
CSS

Пример:

ul li:not(:first-child) {
	color: red;
}
CSS

Пример:

:last-child – элемент, который расположен последним в родительском элементе.

ul li:last-child {
	color: red;
}
CSS

Пример:

ul li:not(:last-child) {
	color: red;
}
CSS

Пример:

ul li:first-child, ul li:last-child {
	color: red;
}
CSS

Пример:

ul li:not(:first-child):not(:last-child) {
	color: red;
}
CSS

Пример:

ul li:nth-child(2) {
	color: red;
}
CSS

Пример:

:nth-last-child(n) находит элемент в обратном порядке, с конца списка элементов.

ul li:nth-last-child(2) {
	color: red;
}
CSS

Пример:

ul li:not(:nth-last-child(2)) {
	color: red;
}
CSS

Пример:

Пример:

Пример:

20.04.2022
784
Предыдущая запись Как вывести PHP массив
Следующая запись Сортировка в MySQL

Комментарии

, чтобы добавить комментарий.

Другие публикации

Готовые CSS стили для таблиц
Подборка CSS-стилей для оформления таблиц.
95608
+10
Селекторы JQuery
В jQuery, селекторы в основном позаимствованы из CSS 1-3, также добавлены свои, что дало хороший набор инструментов для манипуляций с элементами в документе.
9314
+10
Contenteditable – текстовый редактор
Если добавить атрибут contenteditable к элементу, его содержимое становится доступно для редактирования пользователю, а...
30320
+31
Пример парсинга html-страницы на phpQuery
phpQuery – это удобный HTML парсер взявший за основу селекторы, фильтры и методы jQuery, которые позволяют...
44161
+20
Работа с checkbox в JQuery
Сборник приемов JQuery для работы с чекбоксом.
204802
+13
Манипуляции с элементами jQuery
Сборник методов jQuery для управления элементами DOM.
14440
+6