Псеўдаклас focus-within
Псеўдаклас focus-within
задае стыль
элементам, якія знаходзяцца ў фокусе.
У адрозненне ад псеўдакласа focus
, які задае
стыль непасрэдна самому элементу, focus-within
задае стыль для элемента-родзіча.
Сінтаксіс
селектар:focus-within {
}
Прыклад
Давайце задамо блакітны колер фону элемента-родзіча, калі яго даччыны элемент інпут знаходзіцца ў фокусе:
<div>
Увядзіце ваша імя: <input name="user">
</div>
div {
width: 300px;
height: 50px;
padding: 10px;
}
div:focus-within {
background-color: #C2DDFD;
}
:
Глядзіце таксама
-
псеўдаклас
:indeterminate
,
які задае стыль пераключальнікам, якія знаходзяцца ў нявызначаным стане -
псеўдаклас
:default
,
які задае стыль элементам па змаўчанні -
псеўдаклас
:fullscreen
,
які задае стыль элементам у панарамным рэжыме -
псеўдаклас
:placeholder-shown
,
які задае стыль элементам пры адлюстраванні тэксту-падказкі -
ўласцівасць
caret-color
,
якое задае колер тэкставаму курсару ў інпуце