import {Meta} from '@storybook/addon-docs/blocks'

<Meta title='@dxtmisha/ru/# UI/properties/types/Псевдоклассы и псевдоэлементы (selector, virtual)'/>

# Псевдоклассы и псевдоэлементы (selector, virtual)

Структурные типы `selector` и `virtual` предназначены для стилизации нативных состояний и элементов в браузере (соответственно, псевдоклассов `:hover`, `:focus` и псевдоэлементов `::before`, `::after`). Компилятор привязывает эти стили к родительскому блоку с использованием базового синтаксиса SCSS (`&:` и `&::`).

Объявить эти типы можно с помощью шорткатов `:` (для псевдоклассов) и `::` (для псевдоэлементов). Большинство стандартных браузерных ключей (таких как `hover`, `active`, `before`) также распознаются компилятором автоматически без явных префиксов.

**Входная конфигурация (`properties.json`):**
> Для псевдоэлементов (`virtual`) компилятор автоматически генерирует базовое свойство `content: ""`, поэтому вручную прописывать его в конфигурации не нужно.
```json
{
  "button": {
    "padding": "12px",
    
    ":hover": {                  // Явный псевдокласс (selector, префикс :)
      "opacity": "0.8"
    },
    
    "::after": {                 // Явный псевдоэлемент (virtual, префикс ::)
      "position": "absolute",
      "inset": "0"
    },
    
    "active": {                  // Неявное объявление (определяется автоматически)
      "transform": "scale(0.95)"
    }
  }
}
```

**Ожидаемый результат генерации (SCSS):**
```scss
.button {
  padding: 12px;

  &:hover { opacity: 0.8; }
  
  &::after {
    content: "";
    position: absolute;
    inset: 0;
  }
  
  &:active { transform: scale(0.95); }
}
```
