ターゲット子ども

Question

はのは、私は次のHTML構造を持っていると仮定しましょう：

<div> 
     <div class="class1"> 
      <p class="subclass">whatever</p> 
     </div> 
     <div class="class2"> 
      <p class="subclass">whatever</p> 
     </div> 
     <div class="class3"> 
      <p class="subclass">whatever</p> 
     </div> 
</div> 

は、それは先祖の下で、クラス名subclassを持つ要素をターゲットとする1つのCSSセレクタルールを持つことが可能ですクラス名class1またはclass2？

Answer 1

あなたは常にセレクタ

.class1 .subclass, .class2 .subclass { 
 
    color: red; 
 
}

<div> 
 
     <div class="class1"> 
 
      <p class="subclass">whatever</p> 
 
     </div> 
 
     <div class="class2"> 
 
      <p class="subclass">whatever</p> 
 
     </div> 
 
     <div class="class3"> 
 
      <p class="subclass">whatever</p> 
 
     </div> 
 
</div>

を組み合わせることができます .class*で始まるものを選択するように :not()と属性セレクタを使用して .class3

[class^="class"]:not(.class3) .subclass { 
 
    color: red; 
 
}

<div> 
 
     <div class="class1"> 
 
      <p class="subclass">whatever</p> 
 
     </div> 
 
     <div class="class2"> 
 
      <p class="subclass">whatever</p> 
 
     </div> 
 
     <div class="class3"> 
 
      <p class="subclass">whatever</p> 
 
     </div> 
 
</div>

を除外することができます10