Ziel: first-child oder: nth-of-type (1)

Question

Ich muss das erste Element in anderen Elementen anzielen, aber irgendwie funktioniert es nicht.

Ich möchte nur die erste h2 in der Sidebar Ziel.

Wie kann ich das tun?

Ich habe mit first-child und nth-of-type versucht, aber es funktioniert nicht.

#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>

Siehe fiddle hier.

Answer 1

Sie müssen auf first-child des übergeordneten Elements div von h2 zielen.

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

Oder:

#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

dies wird die Arbeit machen.

#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>