: фокус в рамките - CSS-трикове

В :focus-withinселектора псевдо в CSS е малко необичайно, макар и добре име и по-скоро интуитивно. Той избира елемент, ако този елемент съдържа деца, които имат :focus.

form:focus-within ( background: lightyellow; )

Което работи по този начин ...

Казах „необичайно“, защото в CSS не е обичайно да може да се избере родителски елемент въз основа на съществуването или състоянието на дъщерни елементи. Със сигурност е полезно!

Ето примерен формуляр за изпробване:

Вижте Pen Simple Simple Responsive Form с: focus-Within от Chris Coyier (@chriscoyier) на CodePen.

Обърнете внимание, че примерът използва :focus-withinцелия формуляр и вътрешното обгръщане на въвеждане

с.

Всеки начин, по който даден елемент може да се съсредоточи, ще задейства: фокус-вътре Например, ако елемент има атрибут tab-indexили contenteditable, тогава той е фокусируем елемент и ще работи. Също така няма значение как елементът е станал фокусиран. Може да се щракне или да се докосне, може да се раздели или да се навигира по някакъв друг начин или дори да се фокусира чрез JavaScript, като ...

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

Поддръжка на браузър

Тези данни за поддръжка на браузъра са от Caniuse, който има повече подробности. Число показва, че браузърът поддържа функцията на тази версия и по-нова.