.panel { display: block; } ``` Простий toggle без JavaScript. --- ## Parent через :has() ```css .card:has(button:hover) { border-color: #2563eb; } .field:has(input:focus) { border-color: #2563eb; } .field:has(input:invalid) label { color: #ef4444; } ``` Стилізує parent залежно від child. --- ## Комбінації ```css button:hover:not(:disabled) { background-color: #2563eb; } input:required:invalid { border-color: #ef4444; } .checkbox:checked + .label:hover { color: #1d4ed8; } ``` 22:T507,## :target Елемент, `id` якого в URL hash. ```html Go to section

...

``` ```css section:target { background-color: #fef3c7; border-left: 4px solid #f59e0b; } ``` Корисно для FAQ, якорів, документації. --- ## :open Для `details`, popover. ```css details:open { border-color: #3b82f6; background-color: #f3f4f6; } details:open summary { color: #2563eb; font-weight: 600; } ``` --- ## Sibling styling ### `+` - наступний сусід ```css input:checked + label { color: #2563eb; font-weight: 600; } ``` ### `~` - всі наступні siblings ```css .panel { display: none; } #toggle:checked ~ .panel { display: block; } ``` Простий toggle без JavaScript. --- ## Parent через :has() ```css .card:has(button:hover) { border-color: #2563eb; } .field:has(input:focus) { border-color: #2563eb; } .field:has(input:invalid) label { color: #ef4444; } ``` Стилізує parent залежно від child. --- ## Комбінації ```css button:hover:not(:disabled) { background-color: #2563eb; } input:required:invalid { border-color: #ef4444; } .checkbox:checked + .label:hover { color: #1d4ed8; } ``` 23:T4c7,## Практичний приклад ```css input:focus-visible { outline: 3px solid rgb(37 99 235 / 0.25); border-color: #2563eb; } input:required:invalid { border-color: #ef4444; } .checkbox input:checked + span { color: #2563eb; font-weight: 600; } button:hover { background-color: #2563eb; } button:active { transform: translateY(1px); } button:disabled { opacity: 0.5; cursor: not-allowed; } ``` --- ## Найкращі практики Не прибирай `outline` без альтернативи: ```css button:focus { outline: none; } button:focus-visible { outline: 2px solid #2563eb; outline-offset: 3px; } ``` Додавай `transition` для hover: ```css .button { transition: background-color 0.2s ease, transform 0.1s ease; } ``` Помилки - не лише колір, а й текст: ```html

Please enter a valid email.

``` --- ## Коротко ```css :hover :focus :focus-visible :active :disabled :checked :invalid :required :target :open :has() ``` States роблять інтерфейс зрозумілішим, доступнішим і приємнішим - часто без JavaScript. 24:T4c7,## Практичний приклад ```css input:focus-visible { outline: 3px solid rgb(37 99 235 / 0.25); border-color: #2563eb; } input:required:invalid { border-color: #ef4444; } .checkbox input:checked + span { color: #2563eb; font-weight: 600; } button:hover { background-color: #2563eb; } button:active { transform: translateY(1px); } button:disabled { opacity: 0.5; cursor: not-allowed; } ``` --- ## Найкращі практики Не прибирай `outline` без альтернативи: ```css button:focus { outline: none; } button:focus-visible { outline: 2px solid #2563eb; outline-offset: 3px; } ``` Додавай `transition` для hover: ```css .button { transition: background-color 0.2s ease, transform 0.1s ease; } ``` Помилки - не лише колір, а й текст: ```html

Please enter a valid email.

``` --- ## Коротко ```css :hover :focus :focus-visible :active