ПРОДАЮЩАЯ СТРАНИЦА

«Продающая страница» — в большинстве случаев, это одностраничный сайт в сети Интернет, …

ИНТЕРНЕТ МАГАЗИН

Интернет-магазин – популярная альтернатива обычным магазинам, позволяющая пользователю …

БИЗНЕС САЙТ

Бизнес-сайт служит для представления информации о Вашем бизнесе в сети Интернет. …

САЙТ ВИЗИТКА

Сайт-визитка - это не всегда маленький сайт. Сайт-визитка, вопреки сложившемуся мнению, …

ПЕРСОНАЛЬНЫЙ САЙТ

Персональный сайт — это сайт, который создан для конкретного человека или про …

Псевдокласс  : nth-child ()

Псевдокласс : nth-child ()

Псевдо класс nth-child позволяет привязать стиль к элементам Web - страницы, выбрав их по порядковым номерам, под которыми эти элементы определенны в своём родителе. Ниже приведена схема применения псевдо класса.
<основной селектор>:nth-child(<a>n + <b>) {стиль}

а – количество элементов в каждой группе
b – число на которое увеличивается счётчик
n – номер группы (начинается с 1)

Рассмотрим последовательность действий браузера при применении нашего псевлокласса . С начало браузер читает таблицу стилей (CSS), далее исходя из формулы разбивает таблицу на группы в которых элементов = а (целое число), следующий шаг найти элемент к которому будет применён стиль, n+b это и будет номер элемента к которому браузер применит заданный стиль.

Пример - 1:
.class tr: nth-child(2n + 1) {background:#ccc;}
В нашем примере в таблице с классом class в строке №2 будет задан серый фон, а если в нашей таблице 4 и более строк, то и к 4 и 6 строке таблицы будет применён тот же стиль. Если мы укажем количество элементов в группе = 3 “ nth-child(3n + 1) “ , то стиль будет применён к второй и третей строке таблицы в каждой группе, т.к. 1+1 = 2 и 2+1 = 3 (вторая и третья строка в группе).

Пример - 2:
.class tr: nth-child(0n + 2) {background:#ccc;}
В этом примере стиль будет применён только к второй строке таблицы, т.к. мы не указали количество групп, это выражение можно записать иначе nth-child(2) , значение не измениться.

Пример - 3:
.class tr: nth-child(odd) {background:#ccc;}
В этом выражении стиль будет применён к нечётным дочерним элементам, т.е. все нечётные строки будут иметь серый фон, если мы изменим odd на even “nth-child(even)” , то стиль будет применён к чётным дочерним элементам.

Пример - 4:
.class tr: nth-last-child(1) {background:#ccc;}
Этот стиль будет применён к последней строке таблицы, т.е. отсчёт происходит с конца таблицы.

Пример - 5:
.class tr: nth-last-child(2) {background:#ccc;}
Этот стиль будет применён к предпоследней строке таблицы.


  

Таблицы (выделяем строки)

ПервыйВторой12
ТретийЧетвёртый34
ПятыйШестой56
СедьмойВосьмой78
 

Таблицы (выделяем столбцы)

ПервыйВторой12
ТретийЧетвёртый34
ПятыйШестой56
СедьмойВосьмой78


Примеры использования псевдокласса


←  Вернуться в категорию  « CSS » 

 
Текст сообщения*

Защита от автоматических сообщений