: фокус-внутри - CSS-хитрости

:focus-withinСелектор псевдо в CSS немного необычно, хотя хорошо назван и довольно интуитивно. Он выбирает элемент, если этот элемент содержит дочерние элементы, у которых есть :focus.

form:focus-within ( background: lightyellow; )

Что работает так…

Я сказал «необычно», потому что в CSS не принято выбирать родительский элемент на основе существования или состояния дочерних элементов. Конечно, это полезно!

Вот пример формы:

См. Простую адаптивную форму Pen с помощью: focus-within от Криса Койера (@chriscoyier) на CodePen.

Обратите внимание, что в этом примере используется :focus-withinвся форма и внутренняя упаковка ввода.

с.

Любой способ, которым дочерний элемент может стать сфокусированным, вызовет: focus-within. Например, если у элемента есть атрибут tab-indexили contenteditable, то это элемент, на который можно сфокусироваться, и он будет работать. Также не имеет значения, как элемент стал сфокусированным. На него можно было щелкнуть или коснуться, на него можно было перейти с помощью вкладок или перейти к нему другими способами, или даже сфокусироваться с помощью JavaScript, например ...

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

Поддержка браузера

Эти данные о поддержке браузером взяты из Caniuse, где есть более подробная информация. Число означает, что браузер поддерживает эту функцию в этой версии и выше.