CSS「：フォーカス」擬似クラスセレクタ

Question

私はこの権利を取得するために戦ってきた...基本的に私は、次のHTMLを設定している：

<div class="box10"> 
    <span class="label01">Name:</span> 
    <input class="tboxes" type="textbox" /> 
</div> 

「span.label01は」、インライン要素でありますテキストボックス "input.tboxes"の左側に表示されます。私がしようとしているのは、テキストボックスがフォーカスを受け取ったときに、 "span.label01"と "div.box10"にスタイルをつけることです。

input.tboxes:focus span.label01 { 
    color:#FF9900; 
    ... 
} 

を何も起こりません：

私は、次のCSSコードを試してみました。私はこれがCSSのセレクタの問題だと知っていますが、私はそれを正しく理解できないようです。私は隣接する兄弟セレクタを試してみましたが、何もありません。誰も私をここで助けることができますか？ TIA！

Answer 1

あなたのセレクタは、入力内のスパンを探しています。私が知っている限り、あなたがやろうとしていることは、現在のCSSセレクタサポートの状態では本当に確実に可能ではありません。

私はそうのようなのjQueryのビットでそれを行うように誘惑されたい：

あなたは.label01.focussedと.box10のためのスタイルを設定した場合、あなたがやりたいと思っている何をすべき

$("input.tboxes").focus(function() { 
    $(this) 
    .parent("div:first") 
     .addClass("focussed") 
     .find("span") 
      .addClass("focussed"); 
}); 

.focussed。

Answer 2

いいえ - これはCSSセレクタではできません。引用Wikipediaから：

セレクタ

CSSが特定の 基準を満たす要素の親や先祖を選択する方法を提供しない上昇することはできません。より高度なセレクタスキーム（XPathなど）では、より洗練された スタイルシートが有効になります。しかし、CSSワーキンググループが>親セレクタの提案を拒否する主な理由は、ブラウザのパフォーマンスやインクリメンタルレンダリングの問題に関連しています。

あなたは、しかし、いくつかの簡単なJavaScriptでこれを行うことができます：

// with jQuery: 
$('input.tboxes').focus(function() { 
    $(this).parent().find('span.label01').addClass('active'); 
}); 

Answer 3

これは、兄弟セレクタを使用して完全に可能です。

input.tboxes:focus + span.label01 { 
    color:#FF9900; 
    ... 
} 

このルールは、入力がフォーカスされるたびにlabel01に適用されます。

ただし、は、スパンが入力の右側にある場合にのみ機能します。そのため、要素の場所を切り替える必要があります。 divの "position：relative"とspanの "float：left"は、それらを元の場所に戻します。