特定のCSSクラスのセット

Question

私の文書には2つの要素のインスタンスがあります。 1つはクラスslideで、もう1つはクラスslideとslide--currentです。以下はこのマークアップの例です。

<div class="slide slide--current"> 
    <h2 class="title title--centered title--modifier">Slide 1</h2> 
    <div class="text-block"> 
    <p>text</p> 
    </div> 
</div> 

<div class="slide"> 
    <h2 class="title title--centered title--modifier">Slide 2</h2> 
    <div class="text-block"> 
    <p>text</p> 
    </div> 
</div> 

私はそれは私が私のセレクタとして.slide--current > .text-block使用する親としてslide--currentを持っているときtext-blockをターゲットにしたい場合。 text-blockにslide--currentがない場合はどうすればいいですか？私は両方の要素が常にslideのクラスを持っている必要があるので、私は尋ねています。私が.slide .text-blockスタイルを使用する場合は、slide--currentに適用しないでください。これは:not()セレクターのケースですか？

Answer 1

あなたが疑似セレクタを使用することができますあなたの場合は

.slide:not(.slide--current) { 
    // styling here 
} 

、限りの.text-ブロックは常に.slideの直接の子であるとして：

.slide > .text-block { 
    // Apply to all text blocks regardless of state of slide 
} 

.slide:not(.slide--current) > .text-block { 
    // Only applied if parent slide is not current 
} 

おそらく達成できます同じ結果を@Rouninで読み込み、思考プロセスを逆にして擬似セレクタを避け、すべてのテキストブロックの基本スタイルを設定してから、スライドが最新であるときにオーバーライドします。

Answer 2

しかし、私はそれが slide--currentを持っていないときtext-blockをターゲットにしたい場合は？

これは、正しい順序でCSSのカスケードを使用する方法のレッスンです。

.text-block { 

BASIC .text-block STYLES 

} 

.slide .text-block { 

ADDITIONAL .slide .text-block STYLES 

} 

.slide--current .text-block { 

ADDITIONAL .slide--current .text-block STYLES 

} 

基本的に、コアスタイルから始めて、コンテキストがますます特定のものになるにつれて、累積的に追加します。