Menu
How can I change the background of a parent <div> when an <input> or <a> is :focus'd (or any other dynamic pseudo-class?
Eg
<div id="formspace"> <form> <label for="question"> How do I select #formspace for the case when a child is active?</label> <input type="text" id="question" name="answer"/></form></div> 
439
A parent is an element that is directly above and connected to an element in the document tree. In the diagram below, the <div> is a parent to the <ul>. A child is an element that is directly below and connected to an element in the document tree. In the diagram above, the <ul> is a child to the <div>.
The :focus selector is used to select the element that has focus. Tip: The :focus selector is allowed on elements that accept keyboard events or other user inputs.
The :focus CSS pseudo-class represents an element (such as a form input) that has received focus. It is generally triggered when the user clicks or taps on an element or selects it with the keyboard's Tab key.
Styling focus #This behavior can be changed with CSS, using the :focus , :focus-within and :focus-visible pseudo-classes that you learned about in the pseudo-classes lesson. It is important to set a focus style which has contrast with the default style of an element.
Unfortunately css doesn't support parent selectors. :(
So the only way to do it is to use javascript like the jQuery parent method.
Update: CSS Selectors Level 4 will support parent selectors! http://www.w3.org/TR/selectors4/#subject
87
The only way I can think of is with JavaSCript:
function focusLink(isOnFocus) { if (isOnFocus) document.getElementById('formspace').className = "<make a focus class name here>"; else document.getElementById('formspace').className = "<default class name here>"; } ...
<input onFocus="focusLink(true)" onBlur="focusLink(false)"> Hope that helps!
28
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
