recursal/MDN huggingface dataset:
::slotted()
===========

CSS псевдо-элемент **`::slotted()`** представляет собой любой элемент, помещённый в слот внутри HTML-шаблона (дополнительная информация в Using templates and slots (en-US)).

Это работает только при использовании внутри CSS, помещённого в shadow DOM (en-US). Обратите также внимание, что этот селектор не будет выбирать текстовый узел, помещённый в слот; он нацелен только на фактические элементы.


```css
/\* Выбирает любой элемент, помещённый в слот \*/
::slotted(\*) {
  font-weight: bold;
}

/\* Выбирает только <span>, помещённый в слот \*/
::slotted(span) {
  font-weight: bold;
}
```

Синтаксис
---------

Error: could not find syntax for this itemПримеры
-------

Следующие фрагменты взяты из нашей демо slotted-pseudo-element (see it live also).

В этом демо мы использовали простой шаблон с тремя слотами:


```html
<template id="person-template">
  <div>
    <h2>Personal ID Card</h2>
    <slot name="person-name">NAME MISSING</slot>
    <ul>
      <li><slot name="person-age">AGE MISSING</slot></li>
      <li><slot name="person-occupation">OCCUPATION MISSING</slot></li>
    </ul>
  </div>
</template>
```


Пользовательский элемент — `<person-details>` — определяется следующим образом:


```js
customElements.define(
  "person-details",
  class extends HTMLElement {
    constructor() {
      super();
      let template = document.getElementById("person-template");
      let templateContent = template.content;

      const shadowRoot = this.attachShadow({ mode: "open" });

      let style = document.createElement("style");
      style.textContent =
        "div { padding: 10px; border: 1px solid gray; width: 200px; margin: 10px; }" +
        "h2 { margin: 0 0 10px; }" +
        "ul { margin: 0; }" +
        "p { margin: 10px 0; }" +
        "::slotted(\*) { color: gray; font-family: sans-serif; } ";

      shadowRoot.appendChild(style);
      shadowRoot.appendChild(templateContent.cloneNode(true));
    }
  },
);
```


Вы увидите, что при заполнении элемента `style` содержимым мы выбираем все slotted-элементы (`::slotted(*)`) и задаём им другой цвет и шрифт. Это позволяет им лучше выделяться рядом с теми слотами, которые ещё не были успешно заполнены.

Элемент выглядит следующим образом при вставке на страницу:


```html
<person-details>
  <p slot="person-name">Dr. Shazaam</p>
  <span slot="person-age">Immortal</span>
  <span slot="person-occupation">Superhero</span>
</person-details>
```

Спецификации
------------

| Specification |
| --- |
| CSS Scoping Module Level 1 # slotted-pseudo |

Совместимость с браузерами
--------------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

Смотрите также
--------------

* Web components
:disabled
=========

Описание
--------

CSS псевдокласс `:disabled` находит любой отключённый элемент. Элемент отключён, если не может быть активирован (например, его нельзя выбрать, нажать на него или ввести текст) или получить фокус. У элемента также есть включённое состояние, когда его можно активировать или сфокусировать.

Примеры
-------

### Пример селекторов

input:disabled

Выберет все отключённые поля ввода

select.country:disabled

Найдёт все отключённые `select` элементы с классом `country`

### Пример использования

Следующий CSS:


```css
input[type="text"]:disabled {
  background: #ccc;
}
```


Применим к этому HTML5 фрагменту:


```html
<form action="#">
  <fieldset>
    <legend>Адрес доставки</legend>
    <input type="text" placeholder="Имя" />
    <input type="text" placeholder="Адрес" />
    <input type="text" placeholder="Почтовый индекс" />
  </fieldset>
  <fieldset id="billing">
    <legend>Адрес оплаты</legend>
    <label for="billing\_is\_shipping">Такой же как адрес доставки:</label>
    <input type="checkbox" onchange="javascript:toggleBilling()" checked />
    <br />
    <input type="text" placeholder="Имя" disabled />
    <input type="text" placeholder="Адрес" disabled />
    <input type="text" placeholder="Почтовый индекс" disabled />
  </fieldset>
</form>
```


Добавим немного javascript:


```js
function toggleBilling() {
  var billingItems = document.querySelectorAll('#billing input[type="text"]');
  for (var i = 0; i < billingItems.length; i++) {
    billingItems[i].disabled = !billingItems[i].disabled;
  }
}
```


Результатом будет отключение всех полей в группе адреса оплаты и окраска их в серый цвет.

Спецификации
------------

| Specification |
| --- |
| HTML Standard # selector-disabled |
| Selectors Level 4 # enableddisabled |

Совместимость с браузерами
--------------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

Смотрите также
--------------

* `:enabled`
Псевдоклассы
============

**Псевдокласс** в CSS — *это ключевое слово, добавленное к селектору,* которое определяет его особое состояние. Например, `:hover` может быть использован для изменения цвета кнопки при наведении курсора на неё.


```css
div:hover {
  background-color: #f89b4d;
}
```


Псевдоклассы дают возможность стилизовать элемент на основе не только отношений в DOM-дереве, но и основываясь на внешних факторах, таких как история посещений (например, `:visited`), состояние содержимого (вроде `:checked` у некоторых элементов формы) или позиции курсора мыши (например, `:hover` определяет, находится ли курсор мыши над элементом).

**Примечание:** В отличие от псевдоклассов, псевдоэлементы могут быть использованы для стилизации *определённой части* элемента.

Синтаксис
---------
```

selector:pseudo-class {
  property: value;
}
```


Как и с обычными классами, можно совмещать вместе в одном селекторе любое число псевдоклассов.

Список стандартных псевдоклассов
--------------------------------

* `:active`
* `:any` (en-US)
* `:any-link`
* `:checked`
* `:default`
* `:defined`
* `:dir()`
* `:disabled`
* `:empty`
* `:enabled`
* `:first`
* `:first-child`
* `:first-of-type`
* `:fullscreen`
* `:focus`
* `:hover`
* `:indeterminate`
* `:in-range`
* `:invalid`
* `:lang()`
* `:last-child`
* `:last-of-type`
* `:left`
* `:link`
* `:not()`
* `:nth-child()`
* `:nth-last-child()`
* `:nth-last-of-type()`
* `:nth-of-type()`
* `:only-child`
* `:only-of-type`
* `:optional`
* `:out-of-range`
* `:read-only`
* `:read-write`
* `:required`
* `:right`
* `:root`
* `:scope` (en-US)
* `:target`
* `:valid`
* `:visited`
Спецификации
------------

| Specification |
| --- |
| HTML Standard # pseudo-classes |
| Selectors Level 4  |
| CSS Basic User Interface Module Level 4  |

Смотрите также
--------------

* Псевдоэлементы
CSS Basic User Interface
========================

**CSS Basic User Interface** is a CSS module that lets you define the rendering and functionality of features related to the user interface.

Reference
---------

### Properties

* `appearance` 
Экспериментальная возможность
* `box-sizing`
* `cursor`
* `ime-mode` 
Устарело
* `nav-down` 
Экспериментальная возможность
* `nav-left` 
Экспериментальная возможность
* `nav-right` 
Экспериментальная возможность
* `nav-up` 
Экспериментальная возможность
* `outline`
* `outline-width`
* `outline-style`
* `outline-color`
* `outline-offset`
* `resize` (en-US)
* `text-overflow` (en-US)
* `user-select` 
Экспериментальная возможность
Guides
------

Using URL values for the `cursor` property

Explains how a URL can be used with the `cursor` property to produce custom cursors.

Specifications
--------------

| Specification |
| --- |
| CSS Basic User Interface Module Level 4  |
:host()
=======

CSS функция-псевдокласс **`:host()`** выбирает shadow хоста (носителя) shadow DOM (en-US)-a, который содержит CSS, используемый внутри (так что вы можете выбрать пользовательский элемент изнутри его shadow DOM) — но только если селектор, переданный как параметр функции, соответствует shadow хосту.

Самый очевидный способ использовать его — поставить некоторый класс только на определённые экземпляры пользовательских элементов, а затем передать соответствующий классовый селектор как аргумент функции. Вы не можете использовать псевдокласс c селектором наследника, чтобы выбрать только экземпляры пользовательского элемента, которые находятся внутри определённого предка. Это работа `:host-context()`.

**Примечание:** Псевдокласс не имеет эффекта вне shadow DOM.


```css
/\* Выбирает хоста shadow root, только
 если он соответствует аргументу селектора \*/
:host(.special-custom-element) {
  font-weight: bold;
}
```

Синтаксис
---------

Error: could not find syntax for this itemПримеры
-------

### Селективная стилизация shadow хостов

Следующие ниже фрагменты взяты из нашего примера host-selectors (также смотрите вживую).

В этом примере у нас есть простой пользовательский элемент — `<context-span>` — который мы оборачиваем вокруг текста:


```html
<h1>
  Host selectors <a href="#"><context-span>example</context-span></a>
</h1>
```


Внутри конструктора элемента мы создаём элементы `style` и `span`, заполняем `span` контентом пользовательского элемента и заполняем элемент `style` CSS-правилами:


```js
let style = document.createElement("style");
let span = document.createElement("span");
span.textContent = this.textContent;

const shadowRoot = this.attachShadow({ mode: "open" });
shadowRoot.appendChild(style);
shadowRoot.appendChild(span);

style.textContent =
  "span:hover { text-decoration: underline; }" +
  ":host-context(h1) { font-style: italic; }" +
  ':host-context(h1):after { content: " - no links in headers!" }' +
  ":host-context(article, aside) { color: gray; }" +
  ":host(.footer) { color : red; }" +
  ":host { background: rgba(0,0,0,0.1); padding: 2px 5px; }";
```


Правило `:host(.footer) { color : red; }` стилизует все экземпляры элемента `<context-span>` (shadow хост в данном случае) в документе, которые имеют класс `footer` — мы использовали его, чтобы дать экземплярам элемента внутри `<footer>` особый цвет.

Спецификации
------------

| Specification |
| --- |
| CSS Scoping Module Level 1 # host-selector |

Совместимость с браузерами
--------------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

Смотрите также
--------------

* Веб-компоненты
* `:host` (en-US)
* `:host-context()`
Вычисленное значение
====================

**Вычисленное значение** CSS-свойства вычисляется из указанного значения посредством:

* Обработки специальных значений `inherit` и `initial`, а также
* Выполнения вычислений необходимых для получения значения, описанного в строке "Обработка значения" в описании свойства.

Вычисления необходимые для получения **вычисленного значения** для свойства обычно включают в себя преобразование относительных значений (например, находящиеся в единицах `em` или в процентах) в абсолютные значения.

Например, если у элемента указаны значения `font-size: 16px` и `padding-top: 2em`, то вычисленное значение `padding-top` будет `32px` (двойной размер шрифта).

Однако, для некоторых свойств *(таких, где проценты относительны к чему-то, что может потребовать лэйаут определять(переопределить) границы, например, `width`, `margin-right`, `text-indent` и `top`)*, процентно указанные значения преобразуются в процентно вычисляемые значения. Кроме того, безразмерные числа, указанные в свойстве `line-height` становятся вычисленными значениями. Эти относительные единицы, которые остались в вычисленных значениях, становятся абсолютными, когда используемое значение (en-US) установлено.

Основная сфера применения ***вычисленного значения** (кроме как использования его как "шага" между указанным и используемым значением)* является наследование, включая ключевое слово `inherit`.

Замечания
---------

DOM API `getComputedStyle()` возвращает `решённое значение`, которое может быть либо `вычисляемым` или `используемым` значением, в зависимости от свойства.

Спецификации
------------

| Specification |
| --- |
| Cascading Style Sheets Level 2 Revision 2 (CSS 2.2) Specification # computed-value |

Смотрите также
--------------

* Руководство по CSS
* Ключевые концепции CSS
    + Синтаксис CSS
    + @-правила
    + комментарии
    + специфичность
    + наследование
    + блочная модель
    + режимы компоновки
    + модели визуального форматирования
    + Схлопывание отступов
    + Значения
        - начальные
        - вычисленные
        - используемые
        - действительные
    + Синтаксис определения значений (en-US)
    + Сокращённые свойства
    + Замещаемые элементы
:blank
======

**Экспериментальная возможность:** **Это экспериментальная технология**  
Так как спецификация этой технологии ещё не стабилизировалась, смотрите таблицу совместимости по поводу использования в различных браузерах. Также заметьте, что синтаксис и поведение экспериментальной технологии может измениться в будущих версиях браузеров, вслед за изменениями спецификации.

CSS псевдо класс **`:blank`** находит элементы, у которых либо вообще нет дочерних узлов, либо только пустые текстовые узлы, либо только текстовые узлы, содержащие только пробельные символы.

Syntax
------

Error: could not find syntax for this itemПример
------

### HTML


```html
<div></div>
```

### CSS
```

:root {
  overflow: hidden;
  max-width: 100vw;
  max-height: 100vh;
}

div {
  background-color: #ccc;
  box-sizing: border-box;
  height: 100vh;
  min-height: 16px;
  min-height: 1rem;
}

:-moz-only-whitespace {
  border-color: lime;
}
```



```css
div {
  border: 4px solid red;
}

:blank {
  border-color: lime;
}
```

### Результат

Спецификации
------------

#### No specification found

No specification data found for `css.selectors.-moz-only-whitespace`.  
Check for problems with this page or contribute a missing `spec_url` to mdn/browser-compat-data. Also make sure the specification is included in w3c/browser-specs.

Совместимость с браузерами
--------------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

Смотрите также
--------------

* `:empty`
::first-line (:first-line)
==========================

CSS псевдоэлемент **`::first-line`** применяет стили к первой строке блочного элемента. Обратите внимание, что длина первой строки зависит от многих факторов, включая ширину элемента, ширину документа и размер шрифта текста.


```css
/\* Стили для первой строки элемента <p> \*/
p::first-line {
  color: red;
}
```


**Примечание:** В CSS3 появилась запись `::first-line` (с двумя двоеточиями) для различения псевдоклассов и псевдоэлементов. Браузеры также поддерживают запись `:first-line`, введённую в CSS2.

Разрешённые свойства
--------------------

Только небольшое подмножество CSS-свойств может быть использовано с псевдоэлементом `::first-line`:

* Все свойства, связанные с шрифтами: `font`, `font-kerning` (en-US), `font-style`, `font-variant` (en-US), `font-variant-numeric`, `font-variant-position` (en-US), `font-variant-east-asian` (en-US), `font-variant-caps` (en-US), `font-variant-alternates` (en-US), `font-variant-ligatures`, `font-synthesis` (en-US), `font-feature-settings` (en-US), `font-language-override` (en-US), `font-weight`, `font-size`, `font-size-adjust` (en-US), `font-stretch` (en-US) и `font-family`
* Все свойства, связанные с фоном: `background-color`, `background-clip`, `background-image`, `background-origin`, `background-position`, `background-repeat`, `background-size`, `background-attachment` и `background-blend-mode`
* Свойство `color` (en-US)
* `word-spacing`, `letter-spacing`, `text-decoration` (en-US), `text-transform` (en-US) и `line-height`
* `text-shadow`, `text-decoration` (en-US), `text-decoration-color` (en-US), `text-decoration-line` (en-US), `text-decoration-style` (en-US) и `vertical-align`.
Синтаксис
---------

Error: could not find syntax for this itemПример
------

### HTML


```html
<p>
  Стили будут применены только к первой строке этого параграфа. После этого,
  весь текст будет отображаться как обычно. Увидели, что я имею в виду?
</p>

<span
 >Первая строка этого элемента не будет стилизована специальным образом потому
  что это не блочный элемент.</span
>
```

### CSS


```css
::first-line {
  color: blue;
  text-transform: uppercase;

  /\* ПРЕДУПРЕЖДЕНИЕ: НЕ ИСПОЛЬЗУЙТЕ ЭТО \*/
  /\* Многие свойства запрещены в псевдоэлементах ::first-line \*/
  margin-left: 20px;
  text-indent: 20px;
}
```

### Результат

Спецификации
------------

| Specification |
| --- |
| CSS Pseudo-Elements Module Level 4 # first-line-pseudo |

Совместимость с браузерами
--------------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

Смотрите также
--------------

* `::first-letter`
:fullscreen
===========

CSS Псевдокласс **`:fullscreen`** соответствует элементу, который в данный момент находится в полноэкранном режиме. Если в полноэкранном режиме находятся несколько элементов, то выбираются все они.

Синтаксис
---------

Error: could not find syntax for this itemПримечания по использованию
---------------------------

Псевдокласс `:fullscreen` позволяет настроить ваши таблицы стилей для автоматического регулирования размера, стилю или шаблона содержимого, когда элемент переключается между полноэкранным режимом и традиционным представлением.

Пример
------

В этом примере, цвет кнопки меняется в зависимости от того, находится ли документ в полноэкранном режиме. Он выполнен без принудительного изменения стиля посредством JavaScript.

### HTML

HTML выглядит так:


```html
<h1>MDN Web Docs Demo: :fullscreen pseudo-class</h1>

<p>
  This demo uses the <code>:fullscreen</code> pseudo-class to automatically
  change the style of a button used to toggle full-screen mode on and off,
  entirely using CSS.
</p>

<button id="fs-toggle">Toggle Fullscreen</button>
```


`<button>` с ID `"fs-toggle"` будет изменятся между бледно-красный и бледно-зелёный в зависимости от того, находится ли документ в полноэкранном режиме.

### CSS

Магия происходит в CSS. Используются два правила. Первое устанавливает цвет фона кнопки на "Toggle Full-screen Mode", когда элемент не находится в полноэкранном режиме. Для этого используется ключ `:not(:fullscreen)`, который выглядит как элемент, не имеющий установленного псевдокласса `:fullscreen`.


```css
#fs-toggle:not(:fullscreen) {
  background-color: #afa;
}
```


Когда документ находится в полноэкранном режиме, применяется следующее правило CSS, устанавливающее цвет фона на оттенок бледно-красного.


```css
#fs-toggle:fullscreen {
  background-color: #faa;
}
```

Спецификации
------------

| Specification |
| --- |
| Fullscreen API Standard # :fullscreen-pseudo-class |

Совместимость с браузерами
--------------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

See also
--------

* Fullscreen API (en-US)
* Guide to the Fullscreen API (en-US)
* `:not`
* `::backdrop`
* DOM API: `Element.requestFullscreen()` (en-US), `Document.exitFullscreen()` (en-US), `Document.fullscreenElement` (en-US)
* `allowfullscreen` (en-US) attribute
:root
=====

Описание
--------

CSS псевдокласс `:root` находит корневой элемент дерева документа. Применимо к HTML, `:root` находит элемент `<html>` и идентичен селектору по тегу `html`, но его специфичность выше.

Пример
------

Использование `:root` полезно для объявления CSS Переменных:


```css
:root {
  --main-color: hotpink;
  --pane-padding: 5px 42px;
}
```

Спецификации
------------

| Specification |
| --- |
| Selectors Level 4 # root-pseudo |

Совместимость с браузерами
--------------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
animation-iteration-count
=========================

**Экспериментальная возможность:** **Это экспериментальная технология**  
Так как спецификация этой технологии ещё не стабилизировалась, смотрите таблицу совместимости по поводу использования в различных браузерах. Также заметьте, что синтаксис и поведение экспериментальной технологии может измениться в будущих версиях браузеров, вслед за изменениями спецификации.

Обзор
-----

CSS свойство `animation-iteration-count` определяет сколько раз будет проигрываться анимационный цикл, перед тем как остановиться.

Наиболее удобно использовать это свойство в сокращённом варианте `animation`, в котором указываются все анимационные свойства.

|  |  |
| --- | --- |
| Начальное значение | `1` |
| Применяется к | все элементы, `::before` и `::after` псевдоэлементы |
| Наследуется | нет |
| Обработка значения | как указано |
| Animation type | Not animatable |

Синтаксис
---------


```css
animation-iteration-count: infinite;
animation-iteration-count: 3;
animation-iteration-count: 2.3;

animation-iteration-count: 2, 0, infinite;
```

### Значения

`infinite`

Анимация повторяется бесконечно.

`<number>`

Сколько раз анимация будет повторяться; по умолчанию 1. Отрицательные значения не используются. Можно использовать не целые значения, для проигрывания части анимационного цикла (например, 0.5 воспроизведёт половину анимационного цикла).

### Правила синтаксиса
```

animation-iteration-count =   
  <single-animation-iteration-count># (en-US)    
  
<single-animation-iteration-count> =   
  infinite        | (en-US)  
  <number [0,∞]>    
  
```

Примеры
-------

Смотрите примеры CSS-анимации.

Спецификации
------------

| Specification |
| --- |
| CSS Animations Level 1 # animation-iteration-count |

Совместимость с браузерами
--------------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

Также смотрите
--------------

* Использование CSS-анимацией
* `AnimationEvent`
accent-color
============

CSS-свойство **`accent-color`** устанавливает акцентный (en-US) цвет для некоторых элементов управления пользовательским интерфейсом.

Интерактивный пример
--------------------

Браузеры, которые поддерживают `accent-color`, в настоящее время применяют его к следующим HTML элементам:

* `<input type="checkbox">` (en-US)
* `<input type="radio">`
* `<input type="range">`
* `<progress>`
Синтаксис
---------


```css
/\* Ключевые слова \*/
accent-color: auto;

/\* <color> значения \*/
accent-color: red;
accent-color: #5729e9;
accent-color: rgb(0, 200, 0);
accent-color: hsl(228, 4%, 24%);

/\* Глобальные значения \*/
accent-color: inherit;
accent-color: initial;
accent-color: revert;
accent-color: revert-layer;
accent-color: unset;
```

### Значения

`auto`

Браузер сам определяет цвет в зависимости от платформы.

`<color>`

Задает цвет, который будет использован в качестве акцентного.

Формальное определение
----------------------

|  |  |
| --- | --- |
| Начальное значение | `auto` |
| Применяется к | все элементы |
| Наследуется | да |
| Обработка значения | `auto` is computed as specified and `<color>` values are computed as defined for the `color` (en-US) property. |
| Animation type | by computed value type |

Формальный синтаксис
--------------------
```

accent-color =   
  auto     | (en-US)  
  <color>    
  
```

Примеры
-------

### Установка пользовательского акцентного цвета

#### HTML


```html
<input type="checkbox" checked />
<input type="checkbox" class="custom" checked />
```


#### CSS


```css
input {
  accent-color: auto;
  display: block;
  width: 30px;
  height: 30px;
}

input.custom {
  accent-color: rebeccapurple;
}
```


#### Результат

Спецификации
------------

| Specification |
| --- |
| CSS Basic User Interface Module Level 4 # widget-accent |

Совместимость с браузерами
--------------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

Смотрите также
--------------

* `<input>` элемент
* Применение цвета к HTML-элементам с помощью CSS
* `<color>`
* Другие свойства, связанные с цветом: `color` (en-US), `background-color`, `border-color` (en-US), `outline-color`, `text-decoration-color` (en-US), `text-emphasis-color` (en-US), `text-shadow`, `caret-color` (en-US) и `column-rule-color`