残念ながら、はい - これは現在 CSS だけでは不可能なことです。この質問への回答とコメントで述べたように、現在、親要素がその子に基づいてスタイルを受け取るようにする方法はありません。

必要なことを行うには、基本的にどの子( <option>) が選択されているかを検出し、それに応じて親のスタイルを設定する必要があります。

ただし、次のように、非常に単純な jQuery 呼び出しでこれを実現できます。

HTML

<select>
  <option value="foo">Foo!</option>
  <option value="bar">Bar!</option>
</select>

jQuery

var $select = $('select');
$select.each(function() {
    $(this).addClass($(this).children(':selected').val());
}).on('change', function(ev) {
    $(this).attr('class', '').addClass($(this).children(':selected').val());
});

CSS

select, option { background: #fff; }
select.foo, option[value="foo"] { background: red; }
select.bar, option[value="bar"] { background: green; }

これは動作中の jsFiddleです。

セレクターの将来についての質問に戻ります。はい-「件名」セレクターは、あなたが言及したことを正確に行うことを目的としています。最新のブラウザーで実際にライブになる場合は、上記のコードを次のように適応させることができます。

select { background: #fff; }
!select > option[value="foo"]:checked { background: red; }
!select > option[value="bar"]:checked { background: green; }

!補足として、を主語の前に置くべきか後に置くべきかについては、まだ議論があります。!somethingこれは、 「何かではない」という意味のプログラミング標準に基づいています。その結果、件名ベースの CSS は、実際には次のようになります。

select { background: #fff; }
select! > option[value="foo"]:checked { background: red; }
select! > option[value="bar"]:checked { background: green; }