:nth-child / CSS3

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

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

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

Значение even

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

<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 определяет последовательный выбор всех нечётных элементов с начала в конец.

<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>

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

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

<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, проще будет понятно что будут затронуты все элементы до указанного числа, изменяется направление с конца на начало.

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

<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 с начала и конца остаются не задействованными.

<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

<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

<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

<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 на котором работает сайт, поэтому они не описаны в предлагаемых демонстрационных кодах, надеюсь Вы понимаете о чём идёт речь.