Selecting direct AND first child in CSS

Question

I have an html setup like this:

<div class = "myClass">

     <div>
         <a>Content</a>
         <p><a>Content</a></p>  
     </div>


     <p><a>Content to CHANGE!</a></p>
     <p>Content</p>

</div>

I simply want to add 10px margin-top to the one labeled "Content to Change". This <p> is a direct child of class="myClass" I beleive and it's the FIRST one that is a <p>;

however this CSS style isn't working:

.myClass p:nth-child(1) {
    margin-top: 10px;
}

OR

.myClass > p:nth-child(1) {
    margin-top: 10px;
}

Anyone see why?

Answer 1

Because p is not the first child of .myClass. The <div> is. Use:

.myClass p:first-of-type

You may also want to use

.myClass > p:first-of-type

to select the child explicitly.