: фокус всередині - CSS-хитрощі

:focus-withinСелектор псевдо в CSS трохи незвично, хоча добре названий і досить інтуїтивно. Він вибирає елемент, якщо цей елемент містить будь-які нащадки :focus.

form:focus-within ( background: lightyellow; )

Що працює так ...

Я сказав "незвично", оскільки в CSS не часто можна вибрати батьківський елемент на основі існування або стану дочірніх елементів. Звичайно, це корисно!

Ось приклад форми, щоб спробувати:

Дивіться просту адаптивну форму Pen with: focus-Within, Кріс Койєр (@chriscoyier) на CodePen.

Зверніть увагу, що приклад використовує :focus-withinвсю форму та внутрішнє обгортання вводу

Будь-який спосіб того, як дочірній елемент може стати зосередженим, спричинить: фокус всередині. Наприклад, якщо елемент має атрибут tab-indexабо contenteditableатрибут, то він є фокусуючим елементом і буде працювати. Також не має значення, як елемент став сфокусованим. На ньому можна було натиснути або натиснути, можна було перенести вкладки або перейти якимось іншим способом, або навіть сфокусувати через JavaScript, як…

document.querySelector("input").focus();

Підтримка браузера

Дані про підтримку веб-переглядача подані компанією Caniuse, яка містить більше деталей. Цифра вказує на те, що браузер підтримує цю функцію на цій версії та вище.