Разница в производительности CSS селекторов?

Question

[imko]

При использовании универсального селектора - * получаю предупреждение от среды "The universal selector (*) is known to be slowscss(universalSelector)". По смыслу его можно заменить на :nth-child(n), но что-то мне подсказывает что он настолько же медленно будет работать ведь делает то же самое. Как лучше поступить в ситуации где требуется выбрать все элементы?

Comments

[Михаил Р.]

Как лучше поступить в ситуации где требуется выбрать все элементы?

Все, это сколько? Подозреваю, что если речь идет о десятках/сотнях тысячах, то разница будет не ощутима...

[strelok011]

Для этого нужно понимать как браузер начинает обход DOM по правилу css-селектора.
Он начинает разматывать ваш селектор начиная с правого края!
.text .link * {...}
Вот в данном случае (т.к. стоит *) собирает ВООБЩЕ ВСЕ ноды в доме. Потом начинает применять к ним фильтр .link и только потом .text
Отсюда вывод - делайте целевые классы. Делайте селекторы хотя бы не на * а на тег, что так же ужасно, но чуть менее :)

[imko]

Михаил Р., я не могу посчитать к сожалению сколько в будущем где мне элементов понадобится)
Например гриде мне нужно всех потомков первого уровня выбрать чтобы изменить им min-width
Ну допустим в пределах 10 штук

[imko]

strelok011, а с nth-child тоже все собирает?

[Михаил Р.]

imko,

10 штук

Ну 10 тысяч - это не много. Ирония... :)
Предлагаю открыть вопрос, когда "10 штук" увеличится до десятков тысяч.

[imko]

Михаил Р., пока не потребуется знать мне это нельзя? сразу вспомнил вредных взрослых из детства)

[strelok011]

imko, думаю его надо рассматривать как фильтр к основному селектору, т.к. это тоже уточнение. *:nth-child так же будет работать. Если я не ошибаюсь, сейчас не помню точно, но скорее всего такие модификаторы будут работать после применения основного селектора.

[imko]

strelok011, он может быть использован самостоятельно

[strelok011]

imko, то что можно знак * опустить вовсе не значит что алгоритм поменяется.
Цитата из документации "Если псевдокласс указывается без селектора впереди (:hover), то он будет применяться ко всем элементам документа." , что идентично записи *:hover. В css таких допущений можно встретить и в других случаях.