HTML選択オプション値に基づいて別の要素を選択するCSS

Question

HTML選択オプションの値に基づいて要素を選択できるCSSセレクタはありますか？

<select> 
    <option value="1">1</option> 
    <option value="2">2</option> 
    <option value="3">3</option> 
</select> 

<p>Display only if an option with value 1 is selected</p> 

私は、選択した数のフォームフィールドのみを表示するHTML/CSSのみの方法を探しています。私はすでにJavascriptでそれを行う方法を知っています。

これを行う方法はありますか？

---

編集：

質問のタイトルは、おそらく誤解を招くおそれがあります。私は選択ボックスのスタイルをとろうとしているわけではありません。私は実際には、<select>で選択された値に基づいて<P>要素のスタイルを設定しようとしていました。私はdiv.stuff-1とdiv.stuff-2数の-詰め込むを表示したいと思い

<select name="number-of-stuffs"> 
    <option value="1">1</option> 
    <option value="2">2</option> 
    <option value="3">3</option> 
</select> 
<div class="stuff-1"> 
    <input type="text" name="stuff-1-detail"> 
    <input type="text" name="stuff-1-detail2"> 
</div> 
<div class="stuff-2" style="display:none"> 
    <input type="text" name="stuff-2-detail"> 
    <input type="text" name="stuff-2-detail2"> 
</div> 
<div class="stuff-3" style="display:none"> 
    <input type="text" name="stuff-3-detail"> 
    <input type="text" name="stuff-4-detail2"> 
</div> 

：どのようにこれまで私が本当にやろうとしていることは、選択した数値に基づいて、フォームフィールドの数を表示することです

= 2、スタッフ数= 2の場合はdisplay div.stuff-1div.stuff-2、div.stuff-3です。このfiddle

Answer 1

そのような

何かがattribute selector

option[value="1"] 
{ 
background-color:yellow; 
} 

例http://jsfiddle.net/JchE5/

Answer 2

あなたは

select option[value="1"]

使用することができますと呼ばれます

でもブラウザのサポートは素晴らしいとは言えません。

Answer 3

「ライブ」またはリアルタイムでは、javascriptまたはjQueryでのみ可能だと思います。 div内の潜在的に隠されたフィールドをdisplay: none onLoadで囲み、JSまたはjQueryの状態をdisplay: blockに変更するか、好きです。

//Show Hide based on selection form Returns 
$(document).ready(function(){ 

//If Mobile is selected 
$("#type").change(function(){ 
    if($(this).val() == 'Movil'){ 
    $("#imeiHide").slideDown("fast"); // Slide down fast 
    } else{ 
    $("#imeiHide").slideUp("fast"); //Slide Up Fast 
    } 
}); 

//If repairing is selected 
$("#type").change(function(){ 
if($(this).val() == 'repairing'){ 


$("#problemHide").slideDown("fast"); // Slide down fast 
$("#imeiHide").slideDown("fast"); // Slide down fast 
}else{ 
$("#problemHide").slideUp("fast"); //Slide Up Fast 
} 
}); 
}); 
// type is id of <select> 
// Movil is option 1 
// Repairing is option 2 
//problemHide is div hiding field where we write problem 
//imeiHide is div hiding field where we write IMEI 

私もPHPと私のアプリケーションの1 ...

可能に使用していますが、PHPで、あなたが変更要求を送信する必要がありますまたはあなたが特定の持っているPHPでコードを書くことができます例

<select class="<?php if($valueOne == 'Something'){echo 'class1';}else{echo 'class2';}"> 
    <option value="1">1</option> 
    <option value="2">2</option> 
    <option value="3">3</option> 
</select> 

Answer 4

このため、既に選択された値に基づいて、ロードされるクラスは、おそらくCSS2やCSS3のために指定されていない親セレクタが必要です。

• CSS selector for "foo that contains bar"?
• Is there a CSS parent selector?

対象セレクタは、2013年5月のようdefined in the CSS4 working draftされているがないブラウザのベンダーは、まだそれを実装していません。

問題のメソッドが（理論上）対象セレクタを使用して動作するかどうかは、引き続き表示されますか。

Answer 5

この代替手段はどうですか？

HTML：

<input name="number-of-stuffs" type="radio" value="1" /> 
<div> 
    <input type="text" name="stuff-1-detail" /> 
    <input type="text" name="stuff-1-detail2" /> 
</div> 
<input name="number-of-stuffs" type="radio" value="2" /> 
<div> 
    <input type="text" name="stuff-2-detail" /> 
    <input type="text" name="stuff-2-detail2" /> 
</div> 
<input name="number-of-stuffs" type="radio" value="3" /> 
<div> 
    <input type="text" name="stuff-3-detail" /> 
    <input type="text" name="stuff-4-detail2" /> 
</div> 

はCSS：必要な場合にもinputをlabelと非表示（複数の方法）を使用することができます

div { 
    display: none; 
} 

input:checked + div { 
    display: block; 
} 

..私は、これはinputを表示するには、いくつかの工夫が必要と認め、 divのグループは分かれていますが、私はそれが価値があると思います。