Псевдо-элемент nth-child() полезен и удобен в применении.

Единственный момент, который мне всегда давался с трудом (а потом быстро забывался) - это запомнить тот алгоритм, по которому данный псевдо-элемент производил свои вычисления.

С ключевыми словами все более или менее ясно и просто - их всего два, одно отвечает за счет четных чисел, другое - за счет нечетных чисел. Нумерация в списках начинается с 1, а не с нуля. Поэтому при выборке с помощью ключевого слова odd - выбираются все нечетные позиции (1, 2, 3, 5, 7, ...). С помощью ключевого слова even - выбираются четные позиции (2, 4, 6, 8, ...).

Например, так:

li:nth-child(odd) a{
 color: #778899;
 text-decoration: none;
}

или так:

li:nth-child(even) a{
 color: #778899;
 text-decoration: none;
}

Псевдо-элемент nth-child(even)

А вот с общей формулой примерного вида 2n+2 было несколько сложнее. Пока я в “Большой книге CSS3” не нашел простого и краткого объяснения, как “читать” это выражение.

Все просто на самом деле. Допустим, у нас есть такое выражение:

li:nth-child(2n+3){
 color: #778899;
 text-decoration: none;
}

… здесь мы говорим браузеру - применить цвет #778899 и убрать подчеркивание text-decoration: none; к тексту каждого второго (2n) элемента li, начиная с третьего (3).

Еще примеры:

  • .third li:nth-child(3n+2) - выбрать каждый третий элемент, начиная со второго по порядку;
  • .fifth li:nth-child(5n+3) - выбрать каждый пятый элемент, начиная с третьего элемента;
  • .forth li:nth-child(4n+2) - выбрать каждый четвертый элемент, начиная со второго.

То есть, видя выражение типа 3n+4, мы читаем его так: каждый третий элемент, начиная с четвертого. Вопрос остается открытым в отношении загадочной буквы n.

Как уже можно было догадаться, это всего лишь счетчик. Это объяснение выражения было “подсмотрено” мною на CSS-Tricks (How nth-child Works).

Буква n в этом выражении - счетчик, начинающийся с 0. То есть, если взять первое выражение - .third li:nth-child(3n+2), то вычисление внутри него будет производиться следующим образом:

3 * 0 + 2 = 2
3 * 1 + 2 = 5
3 * 2 + 2 = 8
3 * 3 + 2 = 11
3 * 4 + 2 = 14
3 * 5 + 2 = 17
3 * 6 + 2 = 20
...

То есть, как и говорилось выше - каждый третий элемент, начиная со второго. Совершенно ничего сложного, как видим. Простая математика и запоминать ничего не нужно. Главное - понять алгоритм вычисления в этом выражении.

Тогда ключевое слово odd можно записать в виде выражения 3n, а ключевое слово even как выражение 2n. Ключевые слова были введены в употребление для удобства ввиду частого использования выражений 2n и 3n.

На этом все.


Различие между exports и module.exports

Попытка разобраться, в чем различие между exports и module.exports, основанная на статье Understanding module.exports ...Continue reading

Комментарии

Защита от автоматических сообщений
CAPTCHA
Введите слово на картинке