类型选择器无法正常工作

Question

I only want to select the first h2 and first p from #section_5 , thus I used this CSS:

#section_5 div:nth-of-type(1) h2{
    color:green;
}
#section_5 div:nth-of-type(1) p{
    color:blue;
}

But it selects all other children divs of #section_5 which doesn't seem to satisfy the selector: nth-of-type(1)

 /*style the more features title*/ #section_5 div:nth-of-type(1) h2{ color:green; } /*style the more features paragraph*/ #section_5 div:nth-of-type(1) p{ color:blue; } 

 <div id="section_5"> <div class="row just_space1 title"> <div class="col-12 text-center"> <h2>The Limitation Of Design Is Never Ending With Our Features</h2> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vero quod consequuntur quibusdam, enim expedita sed quia nesciunt incidunt accusamus necessitatibus modi adipisci officia libero accusantium esse hic, obcaecati, ullam, laboriosam!</p> </div> </div> <div> <div> <div> <span>&#xe011;</span> <p>Danything</p> <h2>anything t</h2> <p>anything</p> </div> <div> <span>&#xe011;</span> <p>Danything</p> <h2>anything t</h2> <p>anything</p> </div> </div> <!-- /Features column 1 --> <!--Image to style the section--> <div class="col-12 col-md-8"> <p> ssss </p> </div> <div> <div> <span>&#xe011;</span> <p>Danything</p> <h2>anything t</h2> <p>anything</p> </div> <div> <span>&#xe011;</span> <p>Danything</p> <h2>anything t</h2> <p>anything</p> </div> </div> </div> </div> <!--/Section 5--> 

Could you shed the light on this, or am I doing this wrong?

Answer 1

You need to consider the > selector to avoid selecting nested elements. Your selector will select all the div that are nth-of-type(1) at any level not only the div that are child of #section5 .

 /*style the more features title*/ #section_5 > div:nth-of-type(1) h2 { color: green; } /*style the more features paragraph*/ #section_5 > div:nth-of-type(1) p { color: blue; } 

 <div id="section_5"> <div class="row just_space1 title"> <div class="col-12 text-center"> <h2>The Limitation Of Design Is Never Ending With Our Features</h2> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vero quod consequuntur quibusdam, enim expedita sed quia nesciunt incidunt accusamus necessitatibus modi adipisci officia libero accusantium esse hic, obcaecati, ullam, laboriosam!</p> </div> </div> <div> <div> <!-- this div is also nth-of-type(1) --> <div> <!-- this div is also nth-of-type(1) --> <span>&#xe011;</span> <p>Danything</p> <h2>anything t</h2> <p>anything</p> </div> <div> <span>&#xe011;</span> <p>Danything</p> <h2>anything t</h2> <p>anything</p> </div> </div> <div class="col-12 col-md-8"> <p> ssss </p> </div> <div> <div> <!-- this div is also nth-of-type(1) --> <span>&#xe011;</span> <p>Danything</p> <h2>anything t</h2> <p>anything</p> </div> <div> <span>&#xe011;</span> <p>Danything</p> <h2>anything t</h2> <p>anything</p> </div> </div> </div> </div> <!--/Section 5-->