web-dev-qa-db-ja.com

:focus'd要素の親要素に影響を及ぼします(CSS + HTMLを推奨)

親の背景を変更するにはどうすればよいですか<div>の場合<input>または<a>は:focus'd(または他の動的疑似クラスですか?)

例えば

<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>
36
Shane Daniel

残念ながら、cssは親セレクターをサポートしていません。 :(
それを行う唯一の方法は jQuery親メソッド のようなJavaScriptを使用することです。

更新:CSSセレクターレベル4は親セレクターをサポートします! http://www.w3.org/TR/selectors4/#subject

27
Rowno

私が考えることができる唯一の方法は、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)">

お役に立てば幸いです。

6
anthares