Skip to content

Commit

Permalink
update(CSS): web/css/specificity/index.md (webdoky#176)
Browse files Browse the repository at this point in the history
* update(CSS): web/css/specificity/index.md

* Apply suggestions from code review

Co-authored-by: Mykola Myslovskyi <[email protected]>

Co-authored-by: Vitalii Perehonchuk <[email protected]>
Co-authored-by: Mykola Myslovskyi <[email protected]>
  • Loading branch information
3 people authored Jan 13, 2022
1 parent bc6f5ef commit a7b1c9c
Show file tree
Hide file tree
Showing 3 changed files with 12 additions and 11 deletions.
20 changes: 10 additions & 10 deletions files/uk/web/css/specificity/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -11,13 +11,13 @@ tags:

{{CSSRef}}

**Специфічність** &mdash; це засіб, за допомогою якого браузери вирішують, які значення CSS-властивостей найбільш відповідні до певного елемента і, таким чином, будуть застосовані. Специфічність заснована на правилах добору, що складені на основі різних видів [CSS-селекторів](/uk/docs/Web/CSS/Reference#Selectors).
**Специфічність** &mdash; це засіб, за допомогою якого браузери вирішують, які значення CSS-властивостей найбільш відповідні до певного елемента і, таким чином, будуть застосовані. Специфічність заснована на правилах добору, що складені на основі різних видів [CSS-селекторів](/uk/docs/Web/CSS/Reference#selektory).

## Як обчислюється специфічність?

Специфічність &mdash; це вага, що застосовується до певного CSS-оголошення, визначена кількістю кожного з [типів селекторів](#selector_types) у відповідному селекторі. Коли кілька оголошень мають рівну специфічність, до елементу застосовується останнє з оголошень, присутніх у CSS-коді. Специфічність застосовується лише тоді, коли один елемент є цільовим для багатьох оголошень. Згідно з правилами CSS, [стилі, що спрямовані безпосередньо на елемент](#directly_targeted_elements_vs._inherited_styles), завжди матимуть перевагу над правилами, успадкованими елементом від свого предка.
Специфічність &mdash; це вага, що застосовується до певного CSS-оголошення, визначена кількістю кожного з [типів селекторів](#typy-selektoriv) у відповідному селекторі. Коли кілька оголошень мають рівну специфічність, до елементу застосовується останнє з оголошень, присутніх у CSS-коді. Специфічність застосовується лише тоді, коли один елемент є цільовим для багатьох оголошень. Згідно з правилами CSS, [стилі, що спрямовані безпосередньо на елемент](#styli-spriamovani-bezposeredno-na-element-proty-nasliduvanykh-styliv), завжди матимуть перевагу над правилами, успадкованими елементом від свого предка.

> **Зверніть увагу:** [Сусідство елементів](#tree_proximity_ignorance) у дереві документа не впливає на специфічність.
> **Зверніть увагу:** [Сусідство елементів](#ihnoruvannia-susidstva-po-derevu) у дереві документа не впливає на специфічність.
### Типи селекторів

Expand All @@ -29,7 +29,7 @@ tags:

Універсальний селектор ({{CSSxRef("Universal_selectors", "*")}}), комбінатори ({{CSSxRef("Adjacent_sibling_combinator", "+")}}, {{CSSxRef("Child_combinator", "&gt;")}}, {{CSSxRef("General_sibling_combinator", "~")}}, ['` `'](/uk/docs/Web/CSS/Descendant_combinator), {{CSSxRef("Column_combinator", "||")}}) та псевдоклас заперечення ({{CSSxRef(":not", ":not()")}}) не впливають на специфічність. (Селектори, оголошені _всередині_ `:not()`, втім, впливають.)

Щоб отримати більше інформації, відвідайте: ["Специфічність" у розділі "Каскадність та успадкування"](/uk/docs/Learn/CSS/Building_blocks/Cascade_and_inheritance#Specificity_2), а також відвідайте: <https://specifishity.com>
Щоб отримати більше інформації, відвідайте: ["Специфічність" у розділі "Каскадність та успадкування"](/uk/docs/Learn/CSS/Building_blocks/Cascade_and_inheritance#Specificity_2), а також відвідайте: <https://specifishity.com> (англ.).

Вбудовані стилі, напряму додані до елемента (наприклад, `style="font-weight: bold;"`) завжди перезаписують будь-які стилі із зовнішніх листів стилів, і, таким чином, можуть вважатись такими, що мають найвищу специфічність.

Expand Down Expand Up @@ -154,7 +154,7 @@ p.awesome {

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

#### Аби отримати більше інформації, відвідайте:
#### Аби отримати більше інформації, відвідайте (англ.):

- <https://stackoverflow.com/questions/3706819/what-are-the-implications-of-using-important-in-css>
- <https://stackoverflow.com/questions/9245353/what-does-important-in-css-mean>
Expand All @@ -164,7 +164,7 @@ p.awesome {

### Винятки :is() та :not()

Псевдоклас відповідності {{CSSxRef(":is", ":is()")}} {{Experimental_Inline}} та псевдоклас заперечення {{CSSxRef(":not", ":not()")}} _не_ вважаються псевдокласами під час обчислення специфічності. Втім, селектори, вставлені у ці псевдокласи, рахуються як звичайні селектори при підрахунку [типів селекторів](#selector_types).
Псевдоклас відповідності {{CSSxRef(":is", ":is()")}} {{Experimental_Inline}} та псевдоклас заперечення {{CSSxRef(":not", ":not()")}} _не_ вважаються псевдокласами під час обчислення специфічності. Втім, селектори, вставлені у ці псевдокласи, рахуються як звичайні селектори при підрахунку [типів селекторів](#typy-selektoriv).

Цей шматок CSS-коду...

Expand Down Expand Up @@ -274,7 +274,7 @@ div p {

Так відбувається, бо два селектори відповідають одному й тому ж елементові, але селектор ідентифікатора має вищу специфічність.

### Ігнорування близькості по дереву
### Ігнорування сусідства по дереву

Близькість елемента до інших елементів, на котрі посилається певний селектор, не впливає на специфічність. Наступні оголошення стилів...

Expand Down Expand Up @@ -302,7 +302,7 @@ html h1 {

{{EmbedLiveSample("Tree_proximity_ignorance")}}

Причина цього у тому, що два оголошення мають однакові суми [за типами селекторів](#selector_types), але, втім, селектор `html h1` оголошений останнім.
Причина цього у тому, що два оголошення мають однакові суми [за типами селекторів](#typy-selektoriv), але, втім, селектор `html h1` оголошений останнім.

### Стилі, спрямовані безпосередньо на елемент, проти наслідуваних стилів

Expand Down Expand Up @@ -345,6 +345,6 @@ h1 {

## Дивіться також

- Калькулятор специфічності: інтерактивний вебсайт для тестування та розуміння CSS-правил — <https://specificity.keegan.st/>
- Специфічність селекторів CSS3 - [http://www.w3.org/TR/selectors/#specificity](https://www.w3.org/TR/selectors/#specificity)
- Калькулятор специфічності: інтерактивний вебсайт для тестування та розуміння CSS-правил (англ.) <https://specificity.keegan.st/>
- Специфічність селекторів CSS3 (англ.) - [http://www.w3.org/TR/selectors/#specificity](https://www.w3.org/TR/selectors/#specificity)
- {{CSS_Key_Concepts}}
2 changes: 1 addition & 1 deletion scripts/check.js
Original file line number Diff line number Diff line change
Expand Up @@ -34,7 +34,7 @@ async function check() {
), // uniq (yes, a single file may contain both staged and unstaged changes)
);
} else {
targetFiles = argv._.length;
targetFiles = argv._;
}
try {
await startLanguageTool();
Expand Down
1 change: 1 addition & 0 deletions uk_ignore_additions.txt
Original file line number Diff line number Diff line change
@@ -1,3 +1,4 @@
англ
Гідде
Розеллі
БКФ
Expand Down

0 comments on commit a7b1c9c

Please sign in to comment.