CSS how to style a parent item when a textarea is in focus?

Question

I have the following

<div class="comment-wrap">
 <textarea></textarea>
</div>

Whenever the textarea is in focus, I want to style the comment-wrap div. I've tried:

#hallPost-inner + textarea:focus {
    background: red;
}

This does not work. Any ideas on how I can style the comment-wrap div whenever the textarea is in focus, meaning the cursor is blinking in the textarea and the user can type?

Thanks

Answer 1

Not sure what #hallPost-inner is, but in general CSS selectors cannot ascend, meaning you would need to have the textarea:focus selector, but then would need to style an ancestor element, which cannot be done in css. Here's a good resource, among many others. The link shows how an easy javascript solution can be achieved as well.

Answer 2

Use the pseudo selector :focus-within. Note that any child in focus will effect the parent. If you have more children and just wanna apply when the event hits the <textarea>, you will need JS.

Link for more details. (css-tricks)

Ex.:

form{
  padding: 20px;
  background-color: gainsboro
}

input{
  text-align: center
}

form:focus-within {
  background-color: yellow
}

<form>
  <input type="text" placeholder="name">
  <input type="text" placeholder="lastname">
  <input type="button" value="Go!">
</form>

Note: not all browsers support :focus-within

Answer 3

With JavaScript and jQuery, you could do:

$("textarea").live("focus", function(e) {
    $(this).closest(".comment-wrap").css({
        "background": "red"
    });
});