:focus-within
Baseline
Widely available
This feature is well established and works across many devices and browser versions. Itâs been available across browsers since 2020ë 1ì.
CSS :focus-within ìì¬ í´ëì¤ë í¬ì»¤ì¤ë¥¼ ë°ìê±°ë, í¬ì»¤ì¤ë¥¼ ë°ì ìì를 í¬í¨íë ìì를 ëíë
ëë¤. ì¦ ì¤ì¤ë¡ :focus ìì¬ í´ëì¤ì ì¼ì¹íê±°ë, ê·¸ ìì ì¤ íëê° :focusì ì¼ì¹íë ìì를 ëíë
ëë¤. (ìë í¸ë¦¬ ë´ë¶ë í¬í¨)
css
/* Selects a <div> when one of its descendants is focused */
div:focus-within {
background: cyan;
}
íí ì¸ ì ìë ììë¡ì, <form>ì <input> íë ì¤ íëê° í¬ì»¤ì¤ë ê²½ì° ì ì²´ <form>ì ê°ì¡°í´ì¼ í ë ì ì©íê² ì¬ì©í ì ììµëë¤.
구문
Error: could not find syntax for this itemìì
ë¤ì ìì ììë ë í ì¤í¸ ì ë ¥ 칸 ì¤ íëë¼ë í¬ì»¤ì¤ë¥¼ ë°ì ê²½ì° ììì ê°ì¡°í©ëë¤.
HTML
html
<p>ìë ììì ê°ì ì±ì주ì¸ì.</p>
<form>
<label for="given_name">ì´ë¦:</label>
<input id="given_name" type="text" />
<br />
<label for="family_name">ì±:</label>
<input id="family_name" type="text" />
</form>
CSS
css
form {
border: 1px solid;
color: gray;
padding: 4px;
}
form:focus-within {
background: #ff8;
color: black;
}
input {
margin: 4px;
}
ê²°ê³¼
ëª ì¸
| Specification |
|---|
| Selectors Level 4 # the-focus-within-pseudo |