: фокус у оквиру - ЦСС-трикови

:focus-withinСелектор Псеудо у ЦСС је мало необично, иако добро по имену и прилично интуитивно. Одабире елемент ако тај елемент садржи било које подређено дете које има :focus.

form:focus-within ( background: lightyellow; )

Који ради овако ...

Рекао сам „необично“, јер у ЦСС-у није уобичајено да се може одабрати родитељски елемент на основу постојања или стања подређених елемената. Свакако је корисно!

Ево примера обрасца за испробавање:

Погледајте Пен Пен Симпле Респонсиве Форм са: фоцус-Витхин Цхрис Цоииер (@цхрисцоииер) на ЦодеПен-у.

Имајте на уму да се пример користи :focus-withinна целој форми и на унутрашњем умотавању уноса

с.

Било који начин на који подређени елемент може постати фокусиран покреће: фокус унутар. На пример, ако елемент има tab-indexили contenteditableатрибут, он је елемент који се може фокусирати и функционисаће. Такође није важно како је елемент постао фокусиран. На њега се могло кликнути или прислушкивати, на њега се могло доћи картицама или навигацијом на неки други начин, или чак усредсредити се кроз ЈаваСцрипт, попут ...

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

Подршка прегледача

Подаци о подршци за прегледач су од компаније Цаниусе, која садржи више детаља. Број указује на то да прегледач подржава функцију у тој верзији и новијој.