Специфічність CSS селекторів нескінченна

15

Від автора: на сайті CSS Tricks є безліч матеріалів по темі специфічності CSS селекторів. Основна стаття це «Особливості у специфічності CSS селекторів», яка за цей рік вже декілька раз оновлювалася. Коли стаття була опублікована в 2008 році, інформація в ній була написана трохи заплутаним мовою. Минуло багато часу з тих пір, як текст був справним, однак ті помилки досі цікаві.

В оригінальній статті говорилося, що специфічність задається цілим числом integer. Тобто селектори типу #main article.news p:first-child перераховуються у форматі 0122: ID 1, 2 класу та 2 тега. Помилка? За таким принципом схоже, що специфічність працює по десятковій системі числення. А скажімо, значення специфічності було б 0129 – якби це була десяткова система, то при додаванні ще одного значення селектора б стало 130, а відбувається зовсім не це.

Джонатан Снук відразу ж поправив мене: «… якщо до нього застосовано 11 класів, то він не буде старше тега з одним ID»

А Ерік Мейер підтвердив: «Специфічність задається не в десятковій системі числення. Вона не грунтується на чомусь схожому: на ділі специфічність селекторів нескінченна» (Ви навіть можете знайти коментар Гаррі Робертса!)

Основна відмінність при записі значення специфічності в ком. Значення не виглядає одним числом. 0122 насправді 0, 1, 2, 2. Діаграма, що з’явилася в наступних оновленнях постів, набагато краще передає зміст:

Специфічність CSS селекторів нескінченна

Перша цифра визначає, чи є у тега инлайновые стилі чи ні. Значення може приймати значення 0 або 1. Інші ж цифри нескінченні. Я вважаю, це можна записати так: [0 or 1], ∞, ∞, ∞

Цифра в старшій колонці може побити будь-яку цифру з меншою колонки. 0, 1, 0, 0 більше ніж 0, 0, 312, 54659392. Ось саме тому вкрай популярний підхід ніколи не використовувати ID і підтримувати низьку специфічність селекторів.