Question

I’m trying to select an H1 element which is the second-child in its group but it doesn’t seem to be working. The CSS is as shown below

.midLeftIn h1:nth-child(1) {
    color:#f89859;
    text-transform: uppercase;
    font-size: 18px;
    letter-spacing: 3px;
    border-bottom: solid 2px #FFF;

}

.midLeftIn h1:nth-child(2) {
    color:#000;
    text-transform: uppercase;
    font-size: 18px;
    letter-spacing: 3px;
    border-bottom: solid 2px #FFF;

}

WordPress out puts the HTML as shown below

<div class="midLeftIn">



          <h1>We&#8217;re willing to help</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent sed fermentum purus. Integer gravida, neque ac placerat consequat, diam dolor gravida nibh, a venenatis tortor justo non velit. Cras fringilla tincidunt justo eu pulvinar. Phasellus at mauris nec odio sagittis gravida. Etiam bibendum semper libero in dapibus.</p>

<p>Phasellus vulputate, lectus vitae rhoncus dapibus, eros magna bibendum felis, eget placerat neque diam id arcu. Integer vel fringilla erat. Nulla volutpat placerat elit at ornare.Praesent accumsan ultrices mi, sed cursus magna adipiscing eu. Aenean porttitor nisi quis arcu luctus non imperdiet elit porta.  <div style='height:25px; padding:0; margin:0; '  ></div></p>

<h1>Another good thing</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent sed fermentum purus. Integer gravida, neque ac placerat consequat, diam dolor gravida nibh, a venenatis tortor justo non velit. Cras fringilla tincidunt justo eu pulvinar. Phasellus at mauris nec odio sagittis gravida. Etiam bibendum semper libero in dapibus.</p>
<p>Phasellus vulputate, lectus vitae rhoncus dapibus, eros magna bibendum felis, eget placerat neque diam id arcu. Integer vel fringilla erat. Nulla volutpat placerat elit at ornare.Praesent accumsan ultrices mi, sed cursus magna adipiscing eu. Aenean porttitor nisi quis arcu luctus non imperdiet elit porta.   <div style='height:25px; padding:0; margin:0; '  ></div></p>

<h1>Something nice goes here</h1>
<p style="text-align: justify;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent sed fermentum purus. Integer gravida, neque ac placerat consequat, diam dolor gravida nibh, a venenatis tortor justo non velit. Cras fringilla tincidunt justo eu pulvinar. Phasellus at mauris nec odio sagittis gravida. Etiam bibendum semper libero in dapibus.</p>

<p style="text-align: justify;">Phasellus vulputate, lectus vitae rhoncus dapibus, eros magna bibendum felis, eget placerat neque diam id arcu. Integer vel fringilla erat. Nulla volutpat placerat elit at ornare.Praesent accumsan ultrices mi, sed cursus magna adipiscing eu. Aenean porttitor nisi quis arcu luctus non imperdiet elit porta. <div style='height:25px; padding:0; margin:0; '  ></div>

</div><!-- End MidLeftIn -->





</div><!-- End MidLeftIn -->

Answer 1

Are you trying to select each nth h1 child?

If so, you need to use :nth-of-type() instead to distinguish them from p and any other siblings in your div, as :nth-child() only takes into account the position of an element relative to all its siblings:

.midLeftIn h1:nth-of-type(1)
.midLeftIn h1:nth-of-type(2)