Псевдо-элемент

1
nth-child()
полезен и удобен в применении.

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

С ключевыми словами все более или менее ясно и просто - их всего два, одно отвечает за счет четных чисел, другое - за счет нечетных чисел. Нумерация в списках начинается с 1, а не с нуля. Поэтому при выборке с помощью ключевого слова

1
odd
- выбираются все нечетные позиции (
1
1, 2, 3, 5, 7, ...
). С помощью ключевого слова
1
even
- выбираются четные позиции (
1
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)

А вот с общей формулой примерного вида

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

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

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

… здесь мы говорим браузеру - применить цвет

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

Еще примеры:

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

То есть, видя выражение типа

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

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

Буква

1
n
в этом выражении - счетчик, начинающийся с
1
0
. То есть, если взять первое выражение -
1
.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
...

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

Тогда ключевое слово

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

На этом все.


Mangling Angular

Angular Builder поддерживает параметры среды:- NG_BUILD_MANGLE- NG_BUILD_MINIFY- NG_BUILD_BEAUTIFYМожно установить их при запуске скрипта...… Continue reading

Constructor parameter without access modifier

Published on February 04, 2024

RxJs and DestroyRef Provider

Published on January 24, 2024