:last-child style working, :first-child style not working! Why?

Question

I'm creating an inset border effect between paragraphs by using a light border as the border-top on the paragraphs, and a dark border as the border bottom on them.

I'm trying to use p:first-child to remove the top border on the first paragraph, and p:last-child to remove the border on the bottom one. (they have a class of "intro" fyi).

The style to remove the bottom border on the :last-child is working properly, but for some reason the style to remove the top border on the :first-child is not.

It must be a typo or something silly because I can't figure out why it is working for the last-child but not the first-child.

http://joelglovier.com

markup:

<div id="intro">

    <div class="wrap">

        <h1 class="intro">Hi! I'm <a href="http://www.google.com/search?sourceid=chrome&amp;ie=UTF-8&amp;q=Joel+Andrew+Glovier"&gt;Joel Andrew Glovier</a></h1>

        <p class="intro">I'm a <a href="http://www.jagdesignideas.com/portfolio/web.html"&gt;web designer</a> and <a href="http://en.wikipedia.org/wiki/Front_and_back_ends"&gt;front-end developer</a>, currently working for <a href="http://cure.org"&gt;CURE International</a> full time. I also do some <a href="http://www.jagdesignideas.com"&gt;freelance work</a>, I <a href="http://twitter.com/jglovier"&gt;tweet a little</a>, <a href="http://www.jagdesignideas.com/blog/"&gt;blog&lt;/a&gt; & can be found on <a href="http://jagdesignideas.com/contact.html"&gt;other social media</a>. I have <a href="http://dribbble.com/players/jag"&gt;lots of projects</a> going on at once - and I like it that way.</p>

        <p class="intro">I'm a <a href="/good-news">follower of Jesus</a>, and a proud father and husband. I'm also a <a href="http://www.google.com/images?q=bboy&amp;um=1&amp;ie=UTF-8&amp;source=univ&amp;ei=dOpGTID9JoKKlwfV1vWfBA&amp;sa=X&amp;oi=image_result_group&amp;ct=title&amp;resnum=4&amp;ved=0CDoQsAQwAw&amp;biw=1920&amp;bih=1102"&gt;bboy&lt;/a&gt;, I <a href="http://jagboards.com/"&gt;skateboard&lt;/a&gt;, and did I mention that I'm a die-hard <a href="http://www.steelers.com/"&gt;Pittsburgh Steelers</a> fan? Oh, and I've been to <a href="http://hmiafrica.org/"&gt;Kenya three times</a>.</p>

        <p class="intro">Well it's nice to meet you! now that you know so much about me, <a href="http://twitter.com/home?status=@jglovier%20Hi%20Joel!" target="_blank">why don't you say hi</a>.</p>

    </div><!--/.wrap-->

</div>

CSS

div#intro p:first-child {
  border-top:none;
}
div#intro p:last-child {
  border-bottom:none;
} 

Answer 1

p:first-child does not work because the h1 element is the first child of its corresponding parent element; the p elements are the second, third and fourth child elements. Use p:first-of-type instead to only select the first element of the type p.