diff --git a/files/uk/web/css/specificity/index.md b/files/uk/web/css/specificity/index.md index 92384b371c..0127303298 100644 --- a/files/uk/web/css/specificity/index.md +++ b/files/uk/web/css/specificity/index.md @@ -19,9 +19,9 @@ spec-urls: https://drafts.csswg.org/selectors/#specificity-rules ## Як обчислюється специфічність -Специфічність – це алгоритм, що обчислює вагу, котра застосовується до даного оголошення CSS. Вага визначається числом [селекторів кожної вагової категорії](#vahovi-katehoriii-selektoriv) у селекторі, що дає збіг з елементом (чи псевдоелементом). Якщо є два чи більше оголошень, що надають різні значення властивостей для одного елемента, то застосовується значення оголошення із блоку стилів, що має селектор зі збігом з найбільшою алгоритмічною вагою. +Специфічність – це алгоритм, що обчислює вагу, котра застосовується до даного оголошення CSS. Вага визначається числом [селекторів кожної вагової категорії](#vahovi-katehorii-selektoriv) у селекторі, що дає збіг з елементом (чи псевдоелементом). Якщо є два чи більше оголошень, що надають різні значення властивостей для одного елемента, то застосовується значення оголошення із блоку стилів, що має селектор зі збігом з найбільшою алгоритмічною вагою. -Алгоритм специфічності по суті є триколонковим значенням трьох категорій чи ваг – ID, CLASS та TYPE – що відповідають трьом типам селекторів. Це значення представляє кількість компонентів селектора з кожної вагової категорії та записується як _ID - CLASS - TYPE_. Три колонки утворюються шляхом підрахунку кількості компонентів з кожної вагової категорії у селекторах, що відповідають елементові. +Алгоритм специфічності по суті є триколонковим порівнянням значень трьох категорій чи ваг – ID, CLASS та TYPE – що відповідають трьом типам селекторів. Це значення представляє кількість компонентів селектора з кожної вагової категорії та записується як _ID - CLASS - TYPE_. Три колонки утворюються шляхом підрахунку кількості компонентів з кожної вагової категорії у селекторах, що відповідають елементові. ### Вагові категорії селекторів @@ -38,11 +38,11 @@ spec-urls: https://drafts.csswg.org/selectors/#specificity-rules Комбінатори, наприклад, {{CSSxRef("Adjacent_sibling_combinator", "+")}}, {{CSSxRef("Child_combinator", ">")}}, {{CSSxRef("General_sibling_combinator", "~")}}, [" "](/uk/docs/Web/CSS/Descendant_combinator) і {{CSSxRef("Column_combinator", "||")}}, можуть зробити селектор більш специфічним щодо того, що йому відповідає, але не додають жодного значення до ваги специфічності. -Псевдоклас заперечення, {{CSSxRef(":not", ":not()")}}, сам по собі не має ваги. Так само – псевдоклас {{CSSxRef(":is", ":is()")}}. Втім, параметри цих селекторів – значення мають. Значення обох випливають із параметра зі списку їх параметрів, що має найвищу специфічність. [Винятки `:not()` та `:is()`](#vyniatky-is-i-not) описані нижче. +Псевдоклас заперечення, {{CSSxRef(":not", ":not()")}}, сам по собі не має ваги. Так само – псевдокласи {{CSSxRef(":is", ":is()")}} і {{CSSxRef(":has", ":has()")}}. Втім, параметри цих селекторів – значення мають. Значення обох випливають із параметра зі списку їх параметрів, що має найвищу специфічність. [Винятки `:not()`, `:is()` та `:has()`](#vyniatky-is-not-i-has) описані нижче. #### Відповідний селектор -Вага специфічності випливає із селектора збігу. Візьмімо наступний селектор CSS із трьома селекторами, розділеними комою, як приклад: +Вага специфічності випливає із селектора, що дав збіг. Візьмімо наступний селектор CSS із трьома селекторами, розділеними комою, як приклад: ```css [type="password"], @@ -116,9 +116,9 @@ input.myClass { } ``` -### Винятки `:is()` і `:not()` +### Винятки `:is()`, `:not()` і `:has()` -Псевдоклас збігу з будь-чим {{CSSxRef(":is", ":is()")}} та псевдоклас заперечення {{CSSxRef(":not", ":not()")}} _не_ розглядаються як псевдокласи при обчисленні ваги специфічності. Самі по собі вони не додають жодної ваги до рівняння специфічності. Проте параметри-селектори, передані в дужки псевдокласів, є частиною алгоритму специфічності; вагою псевдокласу збігу з будь-чим та псевдокласу заперечення при обчисленні значення специфічності є [вага](#vahovi-katehoriii-selektoriv) параметра. +Псевдоклас збігу з будь-чим {{CSSxRef(":is", ":is()")}}, псевдоклас відносності {{CSSxRef(":has", ":has()")}} та псевдоклас заперечення {{CSSxRef(":not", ":not()")}} _не_ розглядаються як псевдокласи при обчисленні ваги специфічності. Самі по собі вони не додають жодної ваги до рівняння специфічності. Проте параметри-селектори, передані в дужки псевдокласів, є частиною алгоритму специфічності; вагою псевдокласу збігу з будь-чим та псевдокласу заперечення при обчисленні значення специфічності є [вага](#vahovi-katehorii-selektoriv) параметра. ```css p { @@ -128,6 +128,13 @@ p { /* 0-0-1 */ } +h2:nth-last-of-type(n + 2) { + /* 0-1-1 */ +} +h2:has(~ h2) { + /* 0-0-2 */ +} + div.outer p { /* 0-1-2 */ } @@ -136,14 +143,17 @@ div:not(.inner) p { } ``` -Зверніть увагу, що у спарюванні CSS вище вага специфічності, надана псевдокласами `:is()` і `:not()`, є значеннями селектора-параметра, а не псевдокласу. +Зверніть увагу, що у спарюванні CSS вище вага специфічності, надана псевдокласами `:is()`, `:has()` і `:not()`, є значеннями селектора-параметра, а не псевдокласу. -Обидва псевдокласи приймають як параметр складні списки селекторів, список розділених комами селекторів. Ця особливість може використовуватись для збільшення специфічності селектора: +Усі ці три псевдокласи приймають як параметр складні списки селекторів, список розділених комами селекторів. Ця особливість може використовуватись для збільшення специфічності селектора: ```css :is(p, #fakeId) { /* 1-0-0 */ } +h1:has(+ h2, > #fakeId) { + /* 1-0-1 */ +} p:not(#fakeId) { /* 1-0-1 */ } @@ -154,7 +164,7 @@ div:not(.inner, #fakeId) p { У блоці CSS вище `#fakeId` включено у всі селектори. Цей `#fakeId` додає `1-0-0` до ваги специфічності кожного параграфа. -Загалом краще зводити специфічність до мінімуму, але якщо треба з певної причини збільшити специфічність елемента, ці два псевдокласи можуть допомогти. +Загалом краще зводити специфічність до мінімуму, але якщо треба з певної причини збільшити специфічність елемента, ці три псевдокласи можуть допомогти. ```css a:not(#fakeId#fakeId#fakeID) { @@ -192,11 +202,11 @@ p[style*="purple"] { Використання `!important` для відкидання специфічності вважається **шкідливою практикою**, його слід уникати. Розуміння та ефективне використання специфічності та каскадності може усунути будь-яку потребу використання позначки `!important`. -Замість використання позначки `!important` для відкидання чужого CSS (зі сторонніх бібліотек типу Bootstrap чи normalize.css), краще імпортувати сторонні сценарії напряму в [каскадні шари](/uk/docs/Web/CSS/@layer). Якщо ви мусите використати `!important` у своєму CSS, то прокоментуйте таке використання, щоб відповідальні за підтримку коду в майбутньому знали, чому оголошення було позначено як важливе, і що його не варто відкидати. Але `!important` однозначно не слід використовувати при написанні втулок чи фреймворків, котрі іншим розробникам треба буде застосовувати без змоги контролювати. +Замість використання позначки `!important` для відкидання чужого CSS (зі сторонніх бібліотек штибу Bootstrap чи normalize.css), краще імпортувати сторонні сценарії напряму в [каскадні шари](/uk/docs/Web/CSS/@layer). Якщо ви мусите використати `!important` у своєму CSS, то прокоментуйте таке використання, щоб відповідальні за підтримку коду в майбутньому знали, чому оголошення було позначено як важливе, і що його не варто відкидати. Але `!important` однозначно не слід використовувати при написанні втулок чи фреймворків, котрі іншим розробникам треба буде застосовувати без змоги контролювати. ### Виняток `:where()` -Специфічність псевдокласу припасування специфічності {{CSSxRef(":where", ":where()")}} завжди зводиться до нуля, `0-0-0`. Це дає змогу робити селектори CSS украй конкретними щодо того, з якими елементами вони дають збіг, без збільшення їх специфічності. +Специфічність псевдокласу припасування специфічності {{CSSxRef(":where", ":where()")}} завжди зводиться до нуля, `0-0-0`. Це дає змогу робити селектори CSS украй конкретними щодо того, з якими елементами вони дають збіг, без збільшення їх значення специфічності. При створенні CSS коду, яким користуватимуться розробники, котрі не матимуть доступу до редагування вашого CSS, корисною практикою вважається створювати CSS із найменшою можливою специфічністю. Наприклад, якщо ваша тема містить наступний CSS: @@ -218,7 +228,7 @@ footer a { ## Поради щодо боротьби з каверзами специфічності -Замість використання `!important` варто розглянути варіант застосування каскадних шарів та використання у вашому CSS низької ваги специфічності, щоб стилі легко відкидалися трохи більш специфічними правилами. Вживання семантичного HTML допомагає надавати опори, спираючись на котрі можна застосувати оформлення. +Замість використання `!important` варто розглянути варіант застосування каскадних шарів та використання у вашому CSS низької ваги специфічності, щоб стилі легко відкидалися трохи більш специфічними правилами. Вживання семантичного HTML допомагає надавати опори, спираючись на котрі, можна застосувати оформлення. ### Специфічні селектори із високою та низькою специфічністю @@ -246,7 +256,7 @@ footer a { #### Зниження специфічності селектора ідентифікатора -Специфічність заснована на формі селектора. Включення `id` елемента як селектора атрибута замість селектора ідентифікатора – добрий спосіб зробити елемент більш специфічним без додання надлишкової специфічності. У попередньому прикладі селектор `[id="myContent"]` при визначенні специфічності селектора рахується як селектор атрибута, навіть попри те, що вказує на ідентифікатор. +Специфічність заснована на формі селектора. Включення `id` елемента як селектора атрибута замість селектора ідентифікатора – добрий спосіб зробити елемент більш специфічним без додавання надлишкової специфічності. У попередньому прикладі селектор `[id="myContent"]` при визначенні специфічності селектора рахується як селектор атрибута, навіть попри те, що вказує на ідентифікатор. Також можна включити `id` або будь-яку частину селектора як параметр псевдокласу припасування специфічності `:where()`, якщо треба зробити селектор конкретнішим, не додаючи йому жодної специфічності. @@ -265,7 +275,7 @@ footer a { Використовуйте такий підхід ощадно; найкраще не використовувати його узагалі. Використовуючи дублювання селектора, завжди коментуйте свій CSS. -За допомогою `:is()` і `:not()` можна збільшити специфічність навіть тоді, коли до батьківського елемента немає змоги додати `id`: +За допомогою `:is()` і `:not()` (а також `:has()`) можна збільшити специфічність навіть тоді, коли до батьківського елемента немає змоги додати `id`: ```css :not(#fakeID#fakeId#fakeID) span { @@ -423,9 +433,9 @@ input[type="password"]:required { 1. Специфічність застосовується лише тоді, коли на один елемент націлені декілька оголошень в одному каскадному шарі чи джерелі. Специфічність грає роль лише для оголошень однакової важливості та одних джерела і [каскадного шару](/uk/docs/Web/CSS/@layer). Якщо селектори, котрі дають збіг, перебувають в різних джерелах, то те, яке оголошення отримує пріоритет, визначає [каскад](/uk/docs/Web/CSS/Cascade). -2. Коли два селектори в одних каскадному шарі та джерелі мають однакову специфічність, важливою є наближеність; останній селектор перемагає. +2. Коли два селектори в одних каскадному шарі та джерелі мають однакову специфічність, важливим є порядок; останній селектор перемагає. -3. Згідно з правилами CSS, [безпосередньо цільові елементи](#bezposerednio-uspadkovani-elementy-proty-uspadkovanykh-styliv) завжди мають пріоритет над правилами, котрі елемент успадковує від свого предка. +3. Згідно з правилами CSS, [безпосередньо цільові елементи](#bezposeredno-tsilovi-elementy-proty-uspadkovanykh-styliv) завжди мають пріоритет над правилами, котрі елемент успадковує від свого предка. 4. [Наближеність елементів](#ihnoruvannia-nablyzhenosti-po-derevu) по дереву елементів не має впливу на специфічність. @@ -447,7 +457,7 @@ input[type="password"]:required { - [Рамкова модель](/uk/docs/Web/CSS/CSS_Box_Model/Introduction_to_the_CSS_box_model) - [Режими компонування](/uk/docs/Web/CSS/Layout_mode) - [Моделі візуального форматування](/uk/docs/Web/CSS/Visual_formatting_model) - - [Перекриття берегів](/uk/docs/Web/CSS/CSS_Box_Model/Mastering_margin_collapsing) + - [Перекриття зовнішніх відступів](/uk/docs/Web/CSS/CSS_Box_Model/Mastering_margin_collapsing) - Значення - [Початкові значення](/uk/docs/Web/CSS/initial_value) - [Обчислені значення](/uk/docs/Web/CSS/computed_value)