divでCSSを含むdivを選択

Question

シンプルなマークアップがあり、その内容でdivを選択したいと考えています。ここに私のコードは

div:contains("I'm red!") { 
    color: red; 
} 

は

...非推奨されていないか、決して実現してしまった、私は次のことを行うことができますので、... ...

<div class="parent"> 
    <h4>Child of parent</h4> 
    <div> 
     <div>I'm red!</div> 
     <h4>I'm red's sister</h4> 
     <div>I'm blue!</div> 
     <h4>I'm blue's brother</h4> 
    </div> 
</div> 

と、次のCSSで<div>I'm red!</div>を選択しています

ちょうど最初の2つの要素を対象にしていましたが、うまくいきましたが、これが起こった最初の2つの要素CSSコード行に<div>と<h4>がありますか？私はjavascriptなしでこれを行う必要があります。最終的には、3位と4位をターゲットにする必要があります。

Answer 1

はい。 :nth-child(-n+2)を使用してください。

3回目と4回目の場合は、:nth-child(n+3):nth-child(-n+4)または:nth-child(-n+4)を使用して問題を解決してください。

ロジックは簡単である：

• :nth-child(-n+a)
  が
• :nth-child(n+a)
が
• :nth-child(n+a):nth-child(-n+b)
が選択番目の要素とその次の兄弟を選択番目の要素とその前の兄弟を選択番目とb番目の要素、およびそれらの間の兄弟である。

.parent > div > :nth-child(-n+4) { 
 
    color: blue; 
 
} 
 
.parent > div > :nth-child(-n+2) { 
 
    color: red; 
 
}

<div class="parent"> 
 
    <h4>Child of parent</h4> 
 
    <div> 
 
    <div>I'm red!</div> 
 
    <h4>I'm red's sister</h4> 
 
    <div>I'm blue!</div> 
 
    <h4>I'm blue's brother</h4> 
 
    </div> 
 
</div>

Answer 2

私はあなたの質問を理解できないと思います。とにかくそれを1行に入れることができます。

.parent div:nth-child(1), .parent dh4:nth-child(2) {color: red;} 

か、最初の二つのdivの上に赤いクラスを適用して行うことができます：

.red{color:red}