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

1

Від автора: уявіть специфічність у вигляді оцінки або ступеня, яка вирішує, які стилі застосувати до елементу. Універсальний селектор (*) має низьку специфічність. Селектор id – високу. Батьківські селектори типу p img і дочірні селектори типу .panel > h2 мають більш високу специфічність, ніж типові селектори p, img і h1.

По початку здається, що складно обчислити точне значення специфічності. У специфікації Selectors Level 3 говориться, що для цього вам необхідно:

підрахувати кількість id селекторів в селекторі (=А);

підрахувати кількість класів, селекторів атрибутів і псевдокласів в селекторі (=);

підрахувати кількість типових селекторів і псевдоелемент в селекторі (=);

проігнорувати універсальний селектор.

Значення А, В і С разом дають кінцеве значення специфічності. ID селектор типу #foo має специфічність 1,0,0. Селектори атрибутів типу [type=email] і класи типу .chart мають специфічність 0,1,0. Якщо додати псевдоклас типу :first-child (наприклад, .chart:first-child), специфічність стане 0,2,0. А прості типові або елементні селектори типу h1 і p дають всього лише 0,0,1.

Замітка: обчислення специфічності

Вивчити і обчислити специфічність селектора можна з допомогою ресурсів Specificity Calculator від Keegan Street і CSS Explain від Joshua Peek.

Складні селектори і комбінатори дають, природно, велику специфічність. Розберемо приклад CSS:

ul#story-list > .book review {
color: #0c0;
}
#story-list > .book review {
color: #f60;
}

Ці правила схожі, але не однакові. У першому селекторі ul#story-list > .bookreview знаходиться типовий селектор (ul), ID селектор (#story-list) і клас (.bookreview). Специфічність дорівнює 1,1,1. У другому селекторі #story-list > .book review зберігаються тільки ID й клас. Специфічність дорівнює 1,1,0. Незважаючи на те, що #story-list > .book review оголошено нижче ul#story-list > .bookreview, висока специфічність останнього змусити елементи з класом .book review забарвитися в зелений, а не помаранчевий колір.

Псевдокласи :link :invalid мають ту ж специфічність, що і класи. У a:link і a.external буде одна специфічність, рівна 0,1,1. Точно так само псевдоелементи типи ::before ::after мають однакову специфічність з типовими та елементними селекторами. Якщо два селектора мають однакову специфічність, в справу вступає каскадування. Приклад:

a:link {
color: #369;
}
a.external {
color: #f60;
}

Якщо застосувати CSS код вище, то всі посилання стануть синювато-сірими крім тих, у яких є class=»external». Такі посилання будуть мати помаранчевий колір.

Підтримання низької специфічність допомагає не допустити повзучості селекторів або тенденції постійного зростання специфічності. Таке часто відбувається, коли в команді з’являються нові розробники, або коли на сайт додаються нові форми контенту. Повзучість селекторів також додає головного болю з довгостроковим обслуговуванням. Ви або будете використовувати все більш специфічні селектори, щоб переписувати правила, або вам доведеться рефакторіть код. Довгі селектори збільшують вагу CSS файлів.

У розділі 2 ми обговоримо, як підтримувати низьку специфічність.

Висновок

Після прочитання цієї глави у вас повинно скластися чітке розуміння CSS селекторів. Зокрема ви повинні знати:

як використовувати селектори і застосувати стилі до конкретних елементів, псевдоелемент і псевдоклассам;

розуміти відмінності між псевдоэлементами і псевдоклассами;

використовувати нові псевдокласи, представлені в специфікаціях Selectors Level 3 і 4;

обчислювати специфічність.

В наступній главі ми розповімо про золоті правила написання обслуговуваного і масштабованого CSS коду.