:nth-child / CSS3

nth-child - css3

Подробное описание как применять свойства псевдоклассов CSS3 :nth-child, :nth-last-child, :nth-of-type и :nth-last-of-type, Вы сможете посмотреть примеры использования дополненные демо результатами.

Свойство псевдокласса :nth-child

Основное свойство псевдокласса :nth-child в последовательности выбора порядковых номеров элементов в HTML коде исходя из устанавливаемых значений, применяемых ко всем свойствам псевдоклассов :nth-last-child, :nth-of-type и :nth-last-of-type.

Общие правила используемых значений :nth-child

Значение even

Значение even определяет последовательный выбор всех чётных элементов с лева на право.

  • 12345

<style>
.pagination.even li span:nth-child(even) {
background:#ccc;
color:red
}
</style>
<ul class="pagination even">
<li>
<span>1</span><span>2</span><span>3</span><span>4</span><span>5</span>
</li>
</ul>

Значение odd

Значение odd определяет последовательный выбор всех нечётных элементов с начала в конец.

  • 12345

<style>
.pagination.odd li span:nth-child(odd) {
background:#ccc;
color:red
}
</style>
<ul class="pagination odd">
<li>
<span>1</span><span>2</span><span>3</span><span>4</span><span>5</span>
</li>
</ul>

Значение числа

Значение число должно быть явно указано на выбираемые элементы, незавизимо от их чётности с лева на право.

  • 12345

<style>
.pagination.mynum li span:nth-child(1) {
background:#111;
color:#fff
}
.pagination.mynum li span:nth-child(2) {
background:#333;
color:#fff
}
.pagination.mynum li span:nth-child(3) {
background:#555;
color:#fff
}
.pagination.mynum li span:nth-child(4) {
background:#777;
color:#fff
}
.pagination.mynum li span:nth-child(5) {
background:#999;
color:#fff
}
</style>
<ul class="pagination mynum">
<li>
<span>1</span><span>2</span><span>3</span><span>4</span><span>5</span>
</li>
</ul>

Значение счётчика

Значения счётчиков могут использовать различную последовательность в определении выбираемых элементов.

n
Счётчик числовых значений начиная с 0, является числовым выражением с последующим увеличением по числовому порядку 1, 2, 3, 4, 5...
числоn
При подобном использовании счётчика происходит последовательное умножение указанного числа на 0, 1, 2, 3, 4, 5....., за счёт этого происходит определение последовательности выбираемых элементов. Например если указать значение :nth-child(2n) элементы будут выбираться в следующей последовательности:
2 * 0 = 2, 2 * 1 = 2, 2 * 2 = 4, 2 * 3 = 6, 2 * 4 = 8, 2 * 5 = 10 и так далее, до бесконечности.
n + число
Тут n будет последовательным увеличением числа + указанное число,
:nth-child(n+1) = 0 + 1 = 1, 1 + 1 = 2, 2 + 1 = 3, 3 + 1 = 4, 4 + 1 = 5...
числоn + число
Если к последовательному умножению будет прибавлено число последовательности придётся отступить от начала элементов с началом указанного числа, далее порядок вычисления будет происходить по принципу "числоn". Например :nth-child(2n+число) выделит элементы в следующем порядке:
2n+1 = отсутствие отступа, так как начинается с числа 1, но при этом дальнейший парядок попросту переходит в нечётную последовательность, выделяя числа 1, 3, 5, 7...
2n+2 = отступ равен 2 и с него начинается дальнейший подсчёт, при таком выражении разницы между комбинацией значений 2n и 2n+2 не будет.
2n+3 = отступ равен 3 и с него начинается подсчёт, последовательность начнётся с 3 и продолжится в нечётном порядке 3, 5, 7, 9...
2n+4 = отступ равен 4 и с него начинается подсчёт, последовательность начнётся с 4 и продолжится в чётном порядке 4, 6, 8, 10...
числоn - число
При таком использовании значений от последовательно умножаемого числа будет отнято указанное число, если для примера взять :nth-child(4n-число) расчёт будет произведён следующим образом:
4n-1 = 4 * 0 - 1 = 3, 4 * 1 - 1 = 3, 4 * 2 - 1 = 7, 4 * 3 - 1 = 11, 4 * 4 - 1 = 15...
4n-2 = 4 * 1 - 2 = 2, 4 * 2 - 2 = 6, 4 * 3 - 2 = 10, 4 * 4 - 2 = 14...
-n + число
Используйте выражение производящее вычитание от указанного числа, последовательность определения происходит в следующем парядке, например:
:nth-child(-n+5) будет выглядеть: 0 + 5 = 5, -1 + 5 = 4, -2 +5 = 3, -3 + 5 = 2, -4 + 5 = 1, проще будет понятно что будут затронуты все элементы до указанного числа, изменяется направление с конца на начало.

Пример использования счётчика

числоn

  • 12345 678910

n + число

  • 12345

числоn + число

  • 12345

числоn - число

  • 12345 678910

-n + число

  • 12345 678910

<p>число<span style="color:red">n</span></p>
<style>
.pagination.numN li span:nth-child(2n) {
background:#000;
color:#fff
}
</style>
<ul class="pagination numN">
<li>
<span>1</span><span>2</span><span>3</span><span>4</span><span>5</span>
<span>6</span><span>7</span><span>8</span><span>9</span><span>10</span>
</li>
</ul>

<p><span style="color:red">n</span> + число</p>
<style>
.pagination.Nnum li span:nth-child(n+1) {
background:blue;
color:#fff
}
</style>
<ul class="pagination Nnum">
<li>
<span>1</span><span>2</span><span>3</span><span>4</span><span>5</span>
</li>
</ul>

<p>число<span style="color:red">n</span> + число</p>
<style>
.pagination.numNnum li span:nth-child(2n+3) {
background:red;
color:#fff
}
</style>
<ul class="pagination numNnum">
<li>
<span>1</span><span>2</span><span>3</span><span>4</span><span>5</span>
</li>
</ul>

<p>число<span style="color:red">n</span> - число</p>
<style>
.pagination.numN-num li span:nth-child(4n-2) {
background:#00BFFF;
color:#000
}
</style>
<ul class="pagination numN-num">
<li>
<span>1</span><span>2</span><span>3</span><span>4</span><span>5</span>
<span>6</span><span>7</span><span>8</span><span>9</span><span>10</span>
</li>
</ul>
<p>-<span style="color:red">n</span> + число</p>
<style>

.pagination.N-num li span:nth-child(-n+5) {
background:#FF00FF;
color:#000
}
</style>
<ul class="pagination N-num">
<li>
<span>1</span><span>2</span><span>3</span><span>4</span><span>5</span>
<span>6</span><span>7</span><span>8</span><span>9</span><span>10</span>

Использование нескольких свойств :nth-child

Допускается одновременное использование нескольких свойств :nth-child с разными значениями, разумеется это доступно только двум типам людей, тем кто понимает что делает и тем кто использует обычный подбор.

В качестве примера используется применение 2 свойств к 10 элементам, из которых крайние 2 с начала и конца остаются не задействованными.

  • 12345 678910

<style>
.pagination.nth-nth li span:nth-child(n+3):nth-child(-n+8) {
background:#FFFF00;
color:#000
}
</style>
<ul class="pagination nth-nth">
<li>
<span>1</span><span>2</span><span>3</span><span>4</span><span>5</span>
<span>6</span><span>7</span><span>8</span><span>9</span><span>10</span>
</li>
</ul>

Свойство псевдокласса :nth-last-child

Общие правила используемых значений :nth-last-child

Для применения свойства псевдокласса :nth-last-child используются выражения аналогичные :nth-child, при этом определение элементов происходит с права на лево, с конца на начало.

Пример применения свойства псевдокласса :nth-last-child

  • 12345 678910

<style>
.pagination.last-child li span:nth-child(-n+5) {
background:#90EE90;
color:#000
}
.pagination.last-child li span:nth-child(n+6) {
background:#00008B;
color:#fff
}
</style>
<ul class="pagination last-child">
<li>
<span>1</span><span>2</span><span>3</span><span>4</span><span>5</span>
<span>6</span><span>7</span><span>8</span><span>9</span><span>10</span>
</li>
</ul>

Свойство псевдокласса :nth-of-type

Общие правила используемых значений :nth-of-type

Свойства псевдокласса :nth-of-type аналогичны :nth-child, свойство используется для определения элементов по их типу. Целью наличия подобного свойства псевдокласса является расширение возможностей влияния на определённые типовые элементы HTML.

Пример применения свойства псевдокласса :nth-of-type

  • 12345 678910

<style>
.pagination.nth-of-type li span:nth-of-type(-n+5) {
background:#2F4F4F;
animation:nth-of-type 4s infinite ease;
color:#000
}
.pagination.nth-of-type li span:nth-of-type(n+6) {
background:#00BFFF;
animation:nth-of-type 3s infinite ease;
color:#fff
}
@keyframes nth-of-type {
0%, 100% {
transform: translate3d(0, 0, 0);
}
10%, 30%, 50%, 70%, 90% {
transform: translate3d(-10px, 0, 0);
}
20%, 40%, 60%, 80% {
transform: translate3d(10px, 0, 0);
}
}
</style>
<ul class="pagination nth-of-type">
<li>
<span>1</span><span>2</span><span>3</span><span>4</span><span>5</span>
<span>6</span><span>7</span><span>8</span><span>9</span><span>10</span>
</li>
</ul>

Свойство псевдокласса :nth-last-of-type

Общие правила используемых значений :nth-last-of-type

У свойства псевдокласса :nth-last-of-type те же выражения и значения что и у :nth-child, свойство тоже определяет тип элемента как :nth-of-type но последовательность изменена с конца на начало.

Пример применения свойства псевдокласса :nth-last-of-type

  • 12345 678910

<style>
.pagination.nth-last-of-type li span:nth-last-of-type(-n+5) {
background:#2F4F4F;
animation:nth-last-of-type 4s infinite ease;
color:#000
}
.pagination.nth-last-of-type li span:nth-last-of-type(n+6) {
background:#00BFFF;
animation:nth-last-of-type 3s infinite ease;
color:#fff
}
@keyframes nth-last-of-type {
0%, 100% {
transform: translate3d(0, 0, 0);
}
10%, 30%, 50%, 70%, 90% {
transform: translate3d(-10px, 0, 0);
}
20%, 40%, 60%, 80% {
transform: translate3d(10px, 0, 0);
}
}
</style>
<ul class="pagination nth-last-of-type">
<li>
<span>1</span><span>2</span><span>3</span><span>4</span><span>5</span>
<span>6</span><span>7</span><span>8</span><span>9</span><span>10</span>
</li>
</ul>
В используемых примерах применяются элементы с базовыми селекторами плагина bootstrap на котором работает сайт, поэтому они не описаны в предлагаемых демонстрационных кодах, надеюсь Вы понимаете о чём идёт речь.

Редактор для проверки знаний

Используя данный материал Вы можете сами попробовать поупражняться с применением свойства :nth-child, редактор поддерживает любые свойства CSS и HTML теги, дополнительно оснащён библиотекой jQuery и плагином Bootstrap.

Нажмите на значёк Кнопка выполнения кода в редакторе для показа результата.

Генератор :nth-child

Генератор :nth-child предназначен для облегчения подбора значений свойствам псевдоклассов :nth-child, :nth-last-child, :nth-of-type и :nth-last-of-type. Вводите свои значения для нужных свойств, а генератор мнгновенно будет отображать результат.


Рейтинг: 5.0/5 из 6



Добавлено Автор Ник Источник Просмотров Комментариев Теги
02-09-2015 Михаил Меренков aTmpl © 927 0 CSS3, nth-last-child, nth-last-of-type, nth-of-type, nth-child