対象：first-childまたは：nth-​​of-type（1）

Question

他の要素の中の最初の要素を対象にする必要がありますが、どういうわけか機能しません。

サイドバーの最初のh2をターゲットにしたいだけです。

どうすればいいですか？

私はfirst-childとnth-of-typeで試しましたが、動作しません。

#sidebar h2:first-child { 
 
    color: blue; 
 
}

<div id="sidebar"> 
 
    <div class="right"> 
 
    <div class="container-right"> 
 
     <div class="freetext"> 
 
     <h2>Heading - target me only</h2> 
 
     <p>Text</p> 
 
     </div> 
 
     <div class="freetext"> 
 
     <h2>Heading</h2> 
 
     <p>Text</p> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div>

ここfiddleを参照してください。

Answer 1

first-child親のdivをh2に設定する必要があります。

#sidebar > div > div > div:first-child > h2 { 
    color: blue; 
} 

または：

#sidebar div.freetext:first-child > h2 { 
    color: blue; 
} 

<div id="sidebar"> 
    <div class="right"> 
     <div class="container-right"> 
      <div class="freetext"> 
       <h2>heading - target me</h2> 
       <p>Text</p> 
      </div> 
      <div class="freetext"> 
       <h2>Heading</h2> 
       <p>Text</p> 
      </div> 
     </div> 
    </div> 
</div> 

jsFiddle here

Answer 2

これは仕事を行います。

#sidebar .freetext:first-child h2 { 
 
    color: blue; 
 
}

<div id="sidebar"> 
 
    <div class="right"> 
 
     <div class="container-right"> 
 
      <div class="freetext"> 
 
       <h2>Heading - target me only</h2> 
 
       <p>Text</p> 
 
      </div> 
 
      <div class="freetext"> 
 
       <h2>Heading</h2> 
 
       <p>Text</p> 
 
      </div> 
 
     </div> 
 
    </div> 
 
</div>