The <strong><code>:focus-within</code></strong> <a href="/en-US/docs/Web/CSS">CSS</a> <a href="/en-US/docs/Web/CSS/Pseudo-classes">pseudo-class</a> matches an element if the element or any of its descendants are focused. In other words, it represents an element that is itself matched by the <a href="/en-US/docs/Web/CSS/:focus"><code>:focus</code></a> pseudo-class or has a descendant that is matched by <code>:focus</code>. (This includes descendants in <a href="/en-US/docs/Web/WebComponents/Usingshadow_DOM">shadow trees</a>.)

<pre class="brush: css notranslate"><code><span class="token comment">/ Selects a &lt;div&gt; when one of its descendants is focused /</span> <span class="token selector">div:focus-within</span> <span class="token punctuation">{</span> <span class="token property">background</span><span class="token punctuation">:</span> cyan<span class="token punctuation">;</span> <span class="token punctuation">}</span> </code></pre>

:focus-within

The :focus-within CSS pseudo-class matches an element if the element or any of its descendants are focused. In other words, it represents an element that is itself matched by the :focus pseudo-class or has a descendant that is matched by :focus. (This includes descendants in shadow trees.)

/* Selects a <div> when one of its descendants is focused */ div:focus-within {   background: cyan; } 

This selector is useful, to take a common example, for highlighting an entire <form> container when the user focuses on one of its <input> fields.

Syntax

:focus-within

Examples

In this example, the form will receive special coloring styles when either text input receives focus.

HTML

<p>Try typing into this form.</p>  <form>   <label for="given_name">Given Name:</label>   <input id="given_name" type="text">   <br>   <label for="family_name">Family Name:</label>   <input id="family_name" type="text"> </form> 

CSS

form {   border: 1px solid;   color: gray;   padding: 4px; }  form:focus-within {   background: #ff8;   color: black; }  input {   margin: 4px; } 

Result

Specifications

See also

Last modified: Aug 12, 2021, by MDN contributors