CSS Селектори
CSS Селектори
Селекторний двигун аналізує текст селектора CSS у структуровану форму та оцінює його щодо DOM-дерев. Він підтримує як прямі запити, так і відповідність правилам каскаду.
Запуск Селекторів
select() оцінює селектор щодо дерева та повертає збіги; element_matches() тестує окремий елемент. Обидва приймають стандартний синтаксис селекторів — типу, класу, id, атрибуту та псевдокласу, включаючи складні та комплексні комбінації.
Структури розібраних селекторів
parse() створює SelectorList з ComplexSelector та CompoundSelector записів, побудованих з TypeSelector, ClassSelector, IDSelector, AttributeSelector (з AttributeOperator), UniversalSelector та Combinator частин.
Псевдокласи
Функціональні псевдокласи моделюються явно: IsPseudoClass, WherePseudoClass, HasPseudoClass, ComplexNotPseudoClass, а також варіанти структурного nth-child через NthFilteredChildPseudoClass з NthArgument.
Specificity
specificity() обчислює стандартний трьохкомпонентний кортеж для селектора, а max_specificity() зводить список; match() поєднує парсинг і оцінку разом. Це ті ж самі значення, які використовує каскад, тому результати запитів і обчислені стилі завжди збігаються.
Поради та найкращі практики
- Використовуйте
element_matches()у фільтрах замість повторного запускуselect()для кожного елемента - Розбирайте один раз і повторно використовуйте
SelectorList, коли той самий селектор застосовується до багатьох дерев - Коли правило несподівано втрачає каскад, порівнюйте значення
specificity()безпосередньо
Поширені проблеми
| Проблема | Причина | Виправлення |
|---|---|---|
| Селектор нічого не збігає | Синтаксична помилка у тексті селектора | parse() викидає через syntax_error — перевірте повідомлення |
| Конфлікти рівної специфічності вирішуються “wrong” | Залежність від порядку | Пізніші правила виграють у випадку нічиї; перевірте порядок правил |
Плутанина між :is() і :where() | :where() вносить нульову специфічність | Обирайте згідно з передбаченою вагою каскаду |
FAQ
Як протестувати один елемент на відповідність селектору?
element_matches() — він повертає булеве значення без сканування дерева.
Як обчислюється специфічність?
specificity() повертає стандартний кортеж компонент (id, class, type); :where() групи додають нуль.
Які псевдокласи підтримуються?
Структуровані форми в API: :is(), :where(), :has(), :not() зі складними аргументами та структурними селекторами типу nth-child.
API Reference Підсумок
| Клас/Метод | Опис |
|---|---|
select | Оцінити селектор щодо дерева |
element_matches | Перевірити один елемент |
parse | Розпарсити текст селектора у SelectorList |
specificity | Обчислити кортеж специфічності |
HasPseudoClass | Структурована :has() форма |
AttributeSelector | Відповідність атрибутів за допомогою операторів |
