: fókusz-belül - CSS-trükkök

A :focus-withinCSS álválasztója kissé szokatlan, bár jól elnevezett és meglehetősen intuitív. Kiválaszt egy elemet, ha az elem tartalmaz olyan gyermekeket, akiknek van :focus.

form:focus-within ( background: lightyellow; )

Ami így működik…

Azt mondtam, hogy „szokatlan”, mert a CSS-ben nem gyakori, hogy a szülő elemet a gyermek elemek létezése vagy állapota alapján lehet kiválasztani. Persze hasznos!

Íme egy példa az űrlapra, amellyel kipróbálhatja:

Lásd a Pen Simple Reagens Form with: focus-inside-t Chris Coyier (@chriscoyier) a CodePen-en.

Ne feledje, hogy a példa :focus-withina teljes űrlapra és a belső beviteli csomagolásra használható

Bármely módon, amikor egy gyermekelem fókuszálhatóvá válik, kiváltja: fókusz-belül. Például, ha egy elemnek van egy tab-indexvagy contenteditableattribútuma, akkor ez egy fókuszálható elem, és működni fog. Nem számít az sem, hogy az elem hogyan lett fókuszálva. Rákattinthatott vagy megérinthető, lapozható lett volna vagy más módon navigálható, vagy akár JavaScript segítségével is összpontosítható, például…

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

Böngésző támogatás

Ez a böngésző támogatási adat a Caniuse cégtől származik, amely részletesebben szerepel. Egy szám azt jelzi, hogy a böngésző támogatja az adott és újabb verziók szolgáltatásait.