translation(CSS): web/css/_colon_state #3735
Conversation
![github-actions[bot]](https://avatars.githubusercontent.com/in/15368?s=60&v=4){kind=small}
|
|
||
| {{CSSRef}} | ||
|
|
||
| [Псевдоклас](/uk/docs/Web/CSS/Pseudo-classes) [CSS](/uk/docs/Web/CSS) **`:state()`** дає збіг з [кастомними елементами](/uk/docs/Web/API/Web_components/Using_custom_elements), які мають вказаний кастомний стан. |
There was a problem hiding this comment.
Жаргонні слова
Це слово є жаргонним
STYLE/slang_words: Жаргонні слова
Псевдоклас CSS :state() дає збіг з кастомними елементами, які мають вказаний кастомний ста...
|
|
||
| {{CSSRef}} | ||
|
|
||
| [Псевдоклас](/uk/docs/Web/CSS/Pseudo-classes) [CSS](/uk/docs/Web/CSS) **`:state()`** дає збіг з [кастомними елементами](/uk/docs/Web/API/Web_components/Using_custom_elements), які мають вказаний кастомний стан. |
There was a problem hiding this comment.
Жаргонні слова
Це слово є жаргонним
STYLE/slang_words: Жаргонні слова
... з кастомними елементами, які мають вказаний кастомний стан. Синтаксис Псевдоклас :state() прийма...
|
|
||
| ## Синтаксис | ||
|
|
||
| Псевдоклас `:state()` приймає як аргумент кастомний ідентифікатор, що представляє стан кастомного елемента для збігу. |
There was a problem hiding this comment.
Жаргонні слова
Це слово є жаргонним
STYLE/slang_words: Жаргонні слова
...сис Псевдоклас :state() приймає як аргумент кастомний ідентифікатор, що представляє стан кастомног...
|
|
||
| ## Синтаксис | ||
|
|
||
| Псевдоклас `:state()` приймає як аргумент кастомний ідентифікатор, що представляє стан кастомного елемента для збігу. |
There was a problem hiding this comment.
Жаргонні слова
Це слово є жаргонним
STYLE/slang_words: Жаргонні слова
...кастомний ідентифікатор, що представляє стан кастомного елемента для збігу. Опис Елементи можуть п...
| Елементи можуть переходити між станами у зв'язку з діями користувача та іншими чинниками. | ||
| Наприклад, елемент може перебувати в стані "hover", коли користувач навів на нього курсор, або посилання може перебувати в стані "visited" після клацання користувачем. | ||
| Елементи, що пропонуються браузерами, можна стилізувати на основі цих станів за допомогою псевдокласів CSS, як от [`:hover`](/uk/docs/Web/CSS/:hover) і [`:visited`](/uk/docs/Web/CSS/:visited). | ||
| Подібно до цього, [автономні кастомні елементи](/uk/docs/Web/API/Web_components/Using_custom_elements#typy-kastomnykh-elementiv) (кастомні елементи, що не походять від вбудованих елементів) можуть розкривати власні стани, що дає сторінкам, які використовують ці елементи, можливість стилізувати їх за допомогою псевдокласу CSS `:state()`. |
There was a problem hiding this comment.
Жаргонні слова
Це слово є жаргонним
STYLE/slang_words: Жаргонні слова
...over і :visited. Подібно до цього, автономні кастомні елементи (кастомні елементи, що не походять ...
| Елементи можуть переходити між станами у зв'язку з діями користувача та іншими чинниками. | ||
| Наприклад, елемент може перебувати в стані "hover", коли користувач навів на нього курсор, або посилання може перебувати в стані "visited" після клацання користувачем. | ||
| Елементи, що пропонуються браузерами, можна стилізувати на основі цих станів за допомогою псевдокласів CSS, як от [`:hover`](/uk/docs/Web/CSS/:hover) і [`:visited`](/uk/docs/Web/CSS/:visited). | ||
| Подібно до цього, [автономні кастомні елементи](/uk/docs/Web/API/Web_components/Using_custom_elements#typy-kastomnykh-elementiv) (кастомні елементи, що не походять від вбудованих елементів) можуть розкривати власні стани, що дає сторінкам, які використовують ці елементи, можливість стилізувати їх за допомогою псевдокласу CSS `:state()`. |
There was a problem hiding this comment.
Жаргонні слова
Це слово є жаргонним
STYLE/slang_words: Жаргонні слова
...дібно до цього, автономні кастомні елементи (кастомні елементи, що не походять від вбудованих елем...
| Елементи, що пропонуються браузерами, можна стилізувати на основі цих станів за допомогою псевдокласів CSS, як от [`:hover`](/uk/docs/Web/CSS/:hover) і [`:visited`](/uk/docs/Web/CSS/:visited). | ||
| Подібно до цього, [автономні кастомні елементи](/uk/docs/Web/API/Web_components/Using_custom_elements#typy-kastomnykh-elementiv) (кастомні елементи, що не походять від вбудованих елементів) можуть розкривати власні стани, що дає сторінкам, які використовують ці елементи, можливість стилізувати їх за допомогою псевдокласу CSS `:state()`. | ||
|
|
||
| Стани кастомного елемента представляються у вигляді рядкових значень. |
There was a problem hiding this comment.
Жаргонні слова
Це слово є жаргонним
STYLE/slang_words: Жаргонні слова
...а допомогою псевдокласу CSS :state(). Стани кастомного елемента представляються у вигляді рядкових ...
| Ці значення додаються та вилучаються з об'єкта [`CustomStateSet`](/uk/docs/Web/API/CustomStateSet), що пов'язаний з відповідним елементом. | ||
| Псевдоклас CSS `:state()` дає збіг з елементом тоді, коли ідентифікатор, переданий як аргумент, присутній у `CustomStateSet` цього елемента. | ||
|
|
||
| Також псевдокласом `:state()` можна користуватися, щоб шукати збіг з кастомними станами всередині реалізації кастомного елемента. |
There was a problem hiding this comment.
Жаргонні слова
Це слово є жаргонним
STYLE/slang_words: Жаргонні слова
...ate() можна користуватися, щоб шукати збіг з кастомними станами всередині реалізації кастомного елем...
| Ці значення додаються та вилучаються з об'єкта [`CustomStateSet`](/uk/docs/Web/API/CustomStateSet), що пов'язаний з відповідним елементом. | ||
| Псевдоклас CSS `:state()` дає збіг з елементом тоді, коли ідентифікатор, переданий як аргумент, присутній у `CustomStateSet` цього елемента. | ||
|
|
||
| Також псевдокласом `:state()` можна користуватися, щоб шукати збіг з кастомними станами всередині реалізації кастомного елемента. |
There was a problem hiding this comment.
Жаргонні слова
Це слово є жаргонним
STYLE/slang_words: Жаргонні слова
...іг з кастомними станами всередині реалізації кастомного елемента. Це досягається шляхом застосування...
| Псевдоклас CSS `:state()` дає збіг з елементом тоді, коли ідентифікатор, переданий як аргумент, присутній у `CustomStateSet` цього елемента. | ||
|
|
||
| Також псевдокласом `:state()` можна користуватися, щоб шукати збіг з кастомними станами всередині реалізації кастомного елемента. | ||
| Це досягається шляхом застосування `:state()` всередині псевдокласу-функції [`:host()`](/uk/docs/Web/CSS/:host_function), яка дає збіг зі станом лише всередині тіньового DOM поточного кастомного елемента. |
There was a problem hiding this comment.
Жаргонні слова
Це слово є жаргонним
STYLE/slang_words: Жаргонні слова
...таном лише всередині тіньового DOM поточного кастомного елемента. Крім цього, псевдоелемент ::part(...
| Також псевдокласом `:state()` можна користуватися, щоб шукати збіг з кастомними станами всередині реалізації кастомного елемента. | ||
| Це досягається шляхом застосування `:state()` всередині псевдокласу-функції [`:host()`](/uk/docs/Web/CSS/:host_function), яка дає збіг зі станом лише всередині тіньового DOM поточного кастомного елемента. | ||
|
|
||
| Крім цього, псевдоелемент [`::part()`](/uk/docs/Web/CSS/::part), після якого стоїть псевдоклас `:state()`, дає змогу шукати збіг у [тіньових частинах](/uk/docs/Web/CSS/CSS_shadow_parts) кастомного елемента, які перебувають у певному стані. (**Тіньові частини** – це частини тіньового дерева кастомного елемента, які явно відкриті для сторінки, що їх вміщає, для потреб стилізації.) |
There was a problem hiding this comment.
Жаргонні слова
Це слово є жаргонним
STYLE/slang_words: Жаргонні слова
...), дає змогу шукати збіг у тіньових частинах кастомного елемента, які перебувають у певному стані. (...
| Також псевдокласом `:state()` можна користуватися, щоб шукати збіг з кастомними станами всередині реалізації кастомного елемента. | ||
| Це досягається шляхом застосування `:state()` всередині псевдокласу-функції [`:host()`](/uk/docs/Web/CSS/:host_function), яка дає збіг зі станом лише всередині тіньового DOM поточного кастомного елемента. | ||
|
|
||
| Крім цього, псевдоелемент [`::part()`](/uk/docs/Web/CSS/::part), після якого стоїть псевдоклас `:state()`, дає змогу шукати збіг у [тіньових частинах](/uk/docs/Web/CSS/CSS_shadow_parts) кастомного елемента, які перебувають у певному стані. (**Тіньові частини** – це частини тіньового дерева кастомного елемента, які явно відкриті для сторінки, що їх вміщає, для потреб стилізації.) |
There was a problem hiding this comment.
Жаргонні слова
Це слово є жаргонним
STYLE/slang_words: Жаргонні слова
...іньові частини – це частини тіньового дерева кастомного елемента, які явно відкриті для сторінки, що...
|
|
||
| ## Приклади | ||
|
|
||
| ### Збіг з кастомним станом |
There was a problem hiding this comment.
Жаргонні слова
Це слово є жаргонним
STYLE/slang_words: Жаргонні слова
...є, для потреб стилізації.) Приклади Збіг з кастомним станом Цей CSS демонструє, як зробити межу ...
|
|
||
| ### Збіг з кастомним станом | ||
|
|
||
| Цей CSS демонструє, як зробити межу автономного кастомного елемента `<labeled-checkbox>` `red` (червоною), коли він перебуває в стані "checked". |
There was a problem hiding this comment.
Жаргонні слова
Це слово є жаргонним
STYLE/slang_words: Жаргонні слова
... CSS демонструє, як зробити межу автономного кастомного елемента <labeled-checkbox> red (червоною), ...
| } | ||
| ``` | ||
|
|
||
| Живий приклад цього коду в дії шукайте в прикладі [Збігу з кастомним станом кастомного елемента поля з галочкою](/uk/docs/Web/API/CustomStateSet#zbih-z-kastomnym-stanom-kastomnoho-elementa-polia-z-halochkoyu) на сторінці `CustomStateSet`. |
There was a problem hiding this comment.
Жаргонні слова
Це слово є жаргонним
STYLE/slang_words: Жаргонні слова
... цього коду в дії шукайте в прикладі Збігу з кастомним станом кастомного елемента поля з галочкою н...
| } | ||
| ``` | ||
|
|
||
| Живий приклад цього коду в дії шукайте в прикладі [Збігу з кастомним станом кастомного елемента поля з галочкою](/uk/docs/Web/API/CustomStateSet#zbih-z-kastomnym-stanom-kastomnoho-elementa-polia-z-halochkoyu) на сторінці `CustomStateSet`. |
There was a problem hiding this comment.
Жаргонні слова
Це слово є жаргонним
STYLE/slang_words: Жаргонні слова
... шукайте в прикладі Збігу з кастомним станом кастомного елемента поля з галочкою на сторінці CustomS...
|
|
||
| Живий приклад цього коду в дії шукайте в прикладі [Збігу з кастомним станом кастомного елемента поля з галочкою](/uk/docs/Web/API/CustomStateSet#zbih-z-kastomnym-stanom-kastomnoho-elementa-polia-z-halochkoyu) на сторінці `CustomStateSet`. | ||
|
|
||
| ### Збіг з кастомним станом у тіньовому DOM кастомного елемента |
There was a problem hiding this comment.
Жаргонні слова
Це слово є жаргонним
STYLE/slang_words: Жаргонні слова
...галочкою на сторінці CustomStateSet. Збіг з кастомним станом у тіньовому DOM кастомного елемента ...
|
|
||
| Живий приклад цього коду в дії шукайте в прикладі [Збігу з кастомним станом кастомного елемента поля з галочкою](/uk/docs/Web/API/CustomStateSet#zbih-z-kastomnym-stanom-kastomnoho-elementa-polia-z-halochkoyu) на сторінці `CustomStateSet`. | ||
|
|
||
| ### Збіг з кастомним станом у тіньовому DOM кастомного елемента |
There was a problem hiding this comment.
Жаргонні слова
Це слово є жаргонним
STYLE/slang_words: Жаргонні слова
...et. Збіг з кастомним станом у тіньовому DOM кастомного елемента Цей приклад демонструє, як можна в...
|
|
||
| ### Збіг з кастомним станом у тіньовому DOM кастомного елемента | ||
|
|
||
| Цей приклад демонструє, як можна використати псевдоклас `:state()` всередині псевдокласу-функції [`:host()`](/uk/docs/Web/CSS/:host_function), щоб шукати збіг з кастомними станами всередині реалізації кастомного елемента. |
There was a problem hiding this comment.
Жаргонні слова
Це слово є жаргонним
STYLE/slang_words: Жаргонні слова
...евдокласу-функції :host(), щоб шукати збіг з кастомними станами всередині реалізації кастомного елем...
|
|
||
| ### Збіг з кастомним станом у тіньовому DOM кастомного елемента | ||
|
|
||
| Цей приклад демонструє, як можна використати псевдоклас `:state()` всередині псевдокласу-функції [`:host()`](/uk/docs/Web/CSS/:host_function), щоб шукати збіг з кастомними станами всередині реалізації кастомного елемента. |
There was a problem hiding this comment.
Жаргонні слова
Це слово є жаргонним
STYLE/slang_words: Жаргонні слова
...іг з кастомними станами всередині реалізації кастомного елемента. Наступний CSS вставляє сірий [x] ...
| } | ||
| ``` | ||
|
|
||
| Живий приклад цього коду в дії шукайте в прикладі [Збігу з кастомним станом кастомного елемента поля з галочкою](/uk/docs/Web/API/CustomStateSet#zbih-z-kastomnym-stanom-kastomnoho-elementa-polia-z-halochkoyu) на сторінці `CustomStateSet`. |
There was a problem hiding this comment.
Жаргонні слова
Це слово є жаргонним
STYLE/slang_words: Жаргонні слова
... цього коду в дії шукайте в прикладі Збігу з кастомним станом кастомного елемента поля з галочкою н...
| } | ||
| ``` | ||
|
|
||
| Живий приклад цього коду в дії шукайте в прикладі [Збігу з кастомним станом кастомного елемента поля з галочкою](/uk/docs/Web/API/CustomStateSet#zbih-z-kastomnym-stanom-kastomnoho-elementa-polia-z-halochkoyu) на сторінці `CustomStateSet`. |
There was a problem hiding this comment.
Жаргонні слова
Це слово є жаргонним
STYLE/slang_words: Жаргонні слова
... шукайте в прикладі Збігу з кастомним станом кастомного елемента поля з галочкою на сторінці CustomS...
|
|
||
| Живий приклад цього коду в дії шукайте в прикладі [Збігу з кастомним станом кастомного елемента поля з галочкою](/uk/docs/Web/API/CustomStateSet#zbih-z-kastomnym-stanom-kastomnoho-elementa-polia-z-halochkoyu) на сторінці `CustomStateSet`. | ||
|
|
||
| ### Збіг з кастомним станом у тіньовій частині |
There was a problem hiding this comment.
Жаргонні слова
Це слово є жаргонним
STYLE/slang_words: Жаргонні слова
...галочкою на сторінці CustomStateSet. Збіг з кастомним станом у тіньовій частині Цей приклад показ...
|
|
||
| ### Збіг з кастомним станом у тіньовій частині | ||
|
|
||
| Цей приклад показує, як псевдоклас `:state()` можна використати для націлення на [тіньові частини](/uk/docs/Web/CSS/CSS_shadow_parts) кастомного елемента. |
There was a problem hiding this comment.
Жаргонні слова
Це слово є жаргонним
STYLE/slang_words: Жаргонні слова
...використати для націлення на тіньові частини кастомного елемента. Тіньові частини визначаються та н...
| Цей приклад показує, як псевдоклас `:state()` можна використати для націлення на [тіньові частини](/uk/docs/Web/CSS/CSS_shadow_parts) кастомного елемента. | ||
|
|
||
| Тіньові частини визначаються та називаються за допомогою атрибута [`part`](/uk/docs/Web/HTML/Global_attributes/part). | ||
| Наприклад, нехай буде кастомний елемент з ім'ям `<question-box>`, який використовує кастомний елемент `<labeled-checkbox>` як тіньову частину з іменем `checkbox`: |
There was a problem hiding this comment.
Жаргонні слова
Це слово є жаргонним
STYLE/slang_words: Жаргонні слова
...помогою атрибута part. Наприклад, нехай буде кастомний елемент з ім’ям <question-box>, який викорис...
| Цей приклад показує, як псевдоклас `:state()` можна використати для націлення на [тіньові частини](/uk/docs/Web/CSS/CSS_shadow_parts) кастомного елемента. | ||
|
|
||
| Тіньові частини визначаються та називаються за допомогою атрибута [`part`](/uk/docs/Web/HTML/Global_attributes/part). | ||
| Наприклад, нехай буде кастомний елемент з ім'ям `<question-box>`, який використовує кастомний елемент `<labeled-checkbox>` як тіньову частину з іменем `checkbox`: |
There was a problem hiding this comment.
Жаргонні слова
Це слово є жаргонним
STYLE/slang_words: Жаргонні слова
...нт з ім’ям <question-box>, який використовує кастомний елемент <labeled-checkbox> як тіньову частин...
| } | ||
| ``` | ||
|
|
||
| Живий приклад цього коду в дії шукайте в прикладі [Збігу з кастомним станом кастомного елемента поля з галочкою](/uk/docs/Web/API/CustomStateSet#zbih-z-kastomnym-stanom-kastomnoho-elementa-polia-z-halochkoyu) на сторінці `CustomStateSet`. |
There was a problem hiding this comment.
Жаргонні слова
Це слово є жаргонним
STYLE/slang_words: Жаргонні слова
... цього коду в дії шукайте в прикладі Збігу з кастомним станом кастомного елемента поля з галочкою н...
| } | ||
| ``` | ||
|
|
||
| Живий приклад цього коду в дії шукайте в прикладі [Збігу з кастомним станом кастомного елемента поля з галочкою](/uk/docs/Web/API/CustomStateSet#zbih-z-kastomnym-stanom-kastomnoho-elementa-polia-z-halochkoyu) на сторінці `CustomStateSet`. |
There was a problem hiding this comment.
Жаргонні слова
Це слово є жаргонним
STYLE/slang_words: Жаргонні слова
... шукайте в прикладі Збігу з кастомним станом кастомного елемента поля з галочкою на сторінці CustomS...
| - [`CustomStateSet`](/uk/docs/Web/API/CustomStateSet) | ||
| - [Псевдоклас](/uk/docs/Web/CSS/Pseudo-classes) | ||
| - [Навчання – Псевдокласи та псевдоелементи](/uk/docs/Learn_web_development/Core/Styling_basics/Pseudo_classes_and_elements) | ||
| - [Кастомні стани та селектори CSS кастомних станів псевдокласів](/uk/docs/Web/API/Web_components/Using_custom_elements#kastomni-stany-ta-selektory-css-kastomnykh-staniv-psevdoklasiv) у [Використанні кастомних елементів](/uk/docs/Web/API/Web_components/Using_custom_elements) |
There was a problem hiding this comment.
Жаргонні слова
Це слово є жаргонним
STYLE/slang_words: Жаргонні слова
...Навчання – Псевдокласи та псевдоелементи - Кастомні стани та селектори CSS кастомних станів псев...
| - [`CustomStateSet`](/uk/docs/Web/API/CustomStateSet) | ||
| - [Псевдоклас](/uk/docs/Web/CSS/Pseudo-classes) | ||
| - [Навчання – Псевдокласи та псевдоелементи](/uk/docs/Learn_web_development/Core/Styling_basics/Pseudo_classes_and_elements) | ||
| - [Кастомні стани та селектори CSS кастомних станів псевдокласів](/uk/docs/Web/API/Web_components/Using_custom_elements#kastomni-stany-ta-selektory-css-kastomnykh-staniv-psevdoklasiv) у [Використанні кастомних елементів](/uk/docs/Web/API/Web_components/Using_custom_elements) |
There was a problem hiding this comment.
Жаргонні слова
Це слово є жаргонним
STYLE/slang_words: Жаргонні слова
...елементи - Кастомні стани та селектори CSS кастомних станів псевдокласів у Використанні касто...
| - [`CustomStateSet`](/uk/docs/Web/API/CustomStateSet) | ||
| - [Псевдоклас](/uk/docs/Web/CSS/Pseudo-classes) | ||
| - [Навчання – Псевдокласи та псевдоелементи](/uk/docs/Learn_web_development/Core/Styling_basics/Pseudo_classes_and_elements) | ||
| - [Кастомні стани та селектори CSS кастомних станів псевдокласів](/uk/docs/Web/API/Web_components/Using_custom_elements#kastomni-stany-ta-selektory-css-kastomnykh-staniv-psevdoklasiv) у [Використанні кастомних елементів](/uk/docs/Web/API/Web_components/Using_custom_elements) |
There was a problem hiding this comment.
Жаргонні слова
Це слово є жаргонним
STYLE/slang_words: Жаргонні слова
...омних станів псевдокласів у Використанні кастомних елементів
Оригінальний вміст: ":state()"@MDN, сирці ":state()"@GitHub