css - 同じ親を持ついくつかの子の CSS セレクター

Question

同じ親を共有するいくつかの要素に対して、CSS でいくつかのルールを作成しています。

#parent_id li
#parent_id label, 
#parent_id input, 
#parent_id select { ... }

親IDを繰り返すことを避けるための代替構文はありますか?

Answer 1

いいえ、純粋な CSS にはありませんが、次のような CSS プリプロセッサを使用できます。

• LESS CSS http://lesscss.org/
• サスhttp://sass-lang.com/
• CSSの切り替えhttp://sourceforge.net/projects/switchcss/
• ...またはその他

Answer 2

選択している要素がすべて親要素内の要素である場合は、スタイルを親要素に適用するだけです。

#parent_id {
     ....
}

そこのスタイルは、その中の要素もそれらのスタイルを取得できるように継承する必要があります。

別のオプションとして、ユニバーサル*セレクターを使用することもできます。

#parent_id * {
    ....
}

これは、要素の少なくとも 1 レベル下にあるすべての要素に影響しますが、それ自体には影響しparent_idませんparent_id。parent_id影響を受けないようにしたいプレーンテキストがある場合は、これが使用される可能性があります。

3 番目のオプションは、HTML マークアップを変更して、影響を与えたい要素がクラスを持つようにすることです。次に、CSS は代わりにそのクラスを参照するだけで済みます。

(ところで - はい、私は LESS/SASS/etc を認識していますが、他の人と同じ回答を投稿することにあまり価値があるとは思いませんでした)

Answer 3

CSS ネイティブはこれをサポートしていません。ただし、SASS/LESS を使用できます。

#parent_id {
  label, input, select { ... }
}

Answer 4

単純なcssでは不可能です。これを達成するには、LESSを試してください。