#til дня

Вам когда-нибудь было мучительно стыдно за то, что чего-то не знаете?

Мне — нет. Но вот сейчас почти да.

Вы знали, что вот уже djn больше года как nth-child в CSS стал нормальным?

Что я имею в виду: у тебя раньше был выбор, nth-child для индексации узлов aka тегов любого вида или nth-of-type для индексации конкретного типа узла (div, p, section).

Выходит какой-то бред, как мне посчитать второй элемент с классом .star?

И вот чего я не знал, это что nth-child может принимать селектор в виде аргумента of!

:nth-child(2 of .star) {
background: red;
}

Ведь счастье так возможно. Стефан Юдис мне это показал.

Вот, Baseline 2023: https://caniuse.com/css-nth-child-of

И демо: https://codepen.io/alinaki/pen/LYKXWYo

Я, короче, очень доволен.

#css #nth #фишка

#фишка дня

Думаю, все знают про :nth-child, :nth-last-child. А также про :nth-of-type и :nth-last-of-type.

Что в них самое раздражающее?

Кто сказал нумерация с единицы? Иди в свой Си.

Конечно же это неочевидность, а когда-то и невозможность, выбора элементов по классу или иному атрибуту!

Да-да, :nth-of-type выбирает по тегу, даже не по классу. Так что же делать?

А делать вот что: уже пару лет с нами присутствует синтаксис-дополнение к nth-child. И называется он of S.

Выглядит так:

:nth-child(An+B [of S]?)
:nth-last-child(An+B [of S]?)

А применяется так:

:nth-child(2 of .highlight)
:nth-child(even of :not([hidden]))

Первый выберет второе появление элемента с классом .highlight, а второй — все чётные не скрытые элементы.

Подробнее — в блоге разработчиков Chrome.

#css #nth #selector

#til дня

Вам когда-нибудь было мучительно стыдно за то, что чего-то не знаете?

Мне — нет. Но вот сейчас почти да.

Вы знали, что вот уже пару лет как nth-child в CSS стал нормальным?

Что я имею в виду: у тебя раньше был выбор, nth-child для индексации узлов aka тегов любого вида или nth-of-type для индексации конкретного типа узла (`div`, p, `section`).

Выходит какой-то бред, как мне посчитать второй элемент с классом .star?

И вот чего я не знал, это что nth-child может принимать селектор в виде аргумента of!

:nth-child(2 of .star) {
background: red;
}

Ведь счастье так возможно. Стефан Юдис мне это показал.

Вот, Baseline 2023: https://caniuse.com/css-nth-child-of

И демо: https://codepen.io/alinaki/pen/LYKXWYo

Я, короче, очень доволен.

#css #nth #фишка #бородач