nth-of-typeを子供の子供を対象にしないでください。

Question

CSS first-of-typeプロパティを使用して<div>の要素をターゲットに設定しようとしていますが、<h1>のこの<div>の最初の子を対象とするだけでなく、タイプ<h1>であり、それはあまり役に立たないようです。子どもの子供がこれから除外される方法はありますか？

以下の例では、#everythingと呼ばれる<div>の直下の子である<h1>があります。 CSSで<h1>を対象にしていますが、正しい<h1>と他の<h1>の両方を<div>にターゲティングすることになります。

#everything h1:first-of-type{ 
 
    color: red; 
 
}

<div id="everything"> 
 
    <h1>hello</h1> 
 
    <div id="something"> 
 
     <h1>goodbye</h1> 
 
    </div> 
 
</div>

Answer 1

あなたは何を望むか、このですか？

#everything>h1:first-of-type{ 
 
    color: red; 
 
}

<div id="everything"> 
 
    <h1>hello</h1> 
 
    <div id="something"> 
 
     <h1>goodbye</h1> 
 
    </div> 
 
</div>

Answer 2

これであなたのCSSコードを更新します。

#everything > h1{ 
    color: red; 
} 

つ以上のオプション：このオプション#everythingについては

#everything:first-child > h1 { 
    color: red; 
} 

：第一子、子H1を指定する必要があるか、それがクラス/ IDが。