CSS селектор :focus-within — фокус усередині елемента

CSS псевдоклас :focus-within вибирає елемент, усередині якого зараз є сфокусований елемент.

правити

Загальний опис

Це той рідкісний випадок, коли CSS дивиться вгору по дереву: фокус на полі, а підсвічується вся форма.

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

правити

+ додати пораду чи нотатку

Синтаксис

:focus-within

Переглядачі

Стаціонарні переглядачі Мобільні переглядачі

Підтримка: стаціонарні переглядачі

Переглядач
focus-within	60+	52+	10.1+	47+	79+	-

Підтримка: мобільні переглядачі

Переглядач
focus-within	60+	yes	yes	10.3+

Приклади

+ запропонувати свій приклад у пісочниці

<form>
    <label>Ім'я <input type="text"></label>
    <label>Пошта <input type="email"></label>
</form>

form {
    padding: 1rem;
    border: 2px solid #ddd;
    transition: border-color .2s;
}

form:focus-within {
    border-color: #0172ad;
    background: #f6fbff;
}