代替/控えめな方法で親子を書くCSS

Question

私はCSSでこの方法でのみ選択できるdivがあります。

#parent-div #child-div {// styles} 

私は次のように今まで私がどうなる子のdiv、にH1、H2、H3、およびpタグのすべてを変更したい：

#parent-div #child-div h1, #parent-div #child-div h2, #parent-div 
#child-div h3, #parent-div #child-div p { 
//styles 
} 

がより効率的にありますこれを行う方法？ ＃parent-div＃child-divを何度も繰り返し入力するのはあまりにも時間がかかるようです。論理的には＃parent-div＃child-div> h1、h2、h3、pのようにしたいと思いますが、これはうまくいきません。

これを短縮する方法に関するアイデアは素晴らしいでしょうか？私は複数のセレクタを使用する必要があるどこで変更/スタイリングが必要なCSSがたくさんある大きなサイトを持っています。親と子div sは両方id Sの標的とされている場合

Answer 1

、（あなたが使用している前提idの適切かつ唯一のそれぞれの1つのインスタンスを持っている）#child-divが十分にあるので、あなたが、#parent-div識別子を省略することができます。

多くの場合、ルールのspecificityに基づいてプロパティが継承されます（フォントの色やフォントサイズなど）。つまり、#child-divという子の宣言は、#child-divというプロパティを作成するだけで省略することができます（必要に応じてチェーンの上に重ねて上書きするだけです）。

@kukkuzさんのように、#child-divのすべての直接の子に同じプロパティを適用しようとしている場合は、#child-div > *を使用できます。

Answer 2

この実験的機能は:anyです。現在、geckoベースといくつかのWebkitベースのブラウザでサポートされています。例えば

：

#parent-div > #child-div > :-moz-any(h1, h2, h3, p){ 
    /*stuff*/ 
} 

注意が:matchesとして標準化中であること。

私が気づいている方法は他にありません。

詳細については、css :any @ MDNを参照してください。

Answer 3

逆のアプローチを試みることがあります。

要素をターゲティングする代わりに、要素を除外します。

子divの子孫である他の要素タイプを知る必要があります。あなたがh1、h2、h3とpタグをスタイルにしたい場合は

ので、これを試してください：要素タイプが不明または予測できない、あまりにも多くある場合

#parent-div #child-div *:not(h4):not(h5):not(h6):not(div):not(span):not(nav):not(section) 

しかし、その後、あなたのオリジナルの方法は完全に見えます良い。

#parent-div #child-div h1, 
#parent-div #child-div h2, 
#parent-div #child-div h3, 
#parent-div #child-div p