Using :focus to style outer div?

Question

When I begin writing text in the textarea, I want the outer div, with a class box, to have its border turned solid instead of dashed, but somehow the :focus doesn't apply in this case. If it works with :active, how come it doesn't work with :focus?

Any ideas why?

(Note. I want the DIV's border to turn solid, NOT the textareas)

div.box {     width: 300px;     height: 300px;     border: thin dashed black; }  div.box:focus{     border: thin solid black; }  <div class="box">     <textarea rows="10" cols="25"></textarea> </div> 

Answer 1

Other posters have already explained why the :focus pseudo class is insufficient, but finally there is a CSS-based standard solution.

CSS Selectors Level 4 defines a new pseudo class:

:focus-within

From MDN:

The :focus-within CSS pseudo-class matches any element that the :focus pseudo-class matches or that has a descendant that the :focus pseudo-class matches. (This includes descendants in shadow trees.)

So now with the :focus-within pseudo class - styling the outer div when the textarea gets clicked becomes trivial.

.box:focus-within {     border: thin solid black; } 

.box {      width: 300px;      height: 300px;      border: 5px dashed red;  }    .box:focus-within {      border: 5px solid green;  }

<p>The outer box border changes when the textarea gets focus.</p>  <div class="box">      <textarea rows="10" cols="25"></textarea>  </div>

Codepen demo

NB: Browser Support : Chrome (60+), Firefox and Safari

Answer 2

DIV elements can get focus if set the tabindex attribute. Here is the working example.

#focus-example > .extra {    display: none;  }  #focus-example:focus > .extra {    display: block;  }

<div id="focus-example" tabindex="0">    <div>Focus me!</div>    <div class="extra">Hooray!</div>  </div>

For more information about focus and blur, you can check out this article.

Update: And here is another example using focus to create a menu.

#toggleMenu:focus {    outline: none;  }  button:focus + .menu {    display: block;  }  .menu {    display: none;  }  .menu:focus {    display: none;  }

<div id="toggleMenu" tabindex="0">    <button type="button">Menu</button>    <ul class="menu" tabindex="1">      <li>Home</li>      <li>About Me</li>      <li>Contacts</li>    </ul>  </div>