Question

I have some posts that look like this in HTML:

<article class="post">
  <h3>Lorem ipsum adipisicing do sed laboris</h3>
  <p>
    Lorem ipsum cillum reprehenderit consequat veniam dolore non minim in dolore commodo labore ex veniam sed aliqua amet incididunt ea ut occaecat cupidatat ex Duis Excepteur exercitation enim tempor deserunt eiusmod deserunt Ut culpa magna culpa.
  </p>
  <p>
    Lorem ipsum quis laboris ex cillum ex do ullamco amet sint commodo reprehenderit id tempor reprehenderit do dolore esse ut qui esse laboris reprehenderit voluptate elit consequat incididunt ut anim nulla cupidatat aliquip est ut elit eiusmod Duis nulla ad ut. 
  </p>
  <p class="read-more">
    <a href="#">Read more »</a>
  </p>
</article>

Then I have some CSS that sets a top and bottom border. The thing is that I don’t want the first post to have a top border and the last to have a bottom border.

My CSS (SASS actually):

  .post {
    border-bottom: 1px solid darken($lightestBlue, 5%);
    border-top: 1px solid darken(#FFFFFF, 5%);

    &:first-child {
      border-top: none;
    }
    &:last-child {
      border-bottom: none;
    }
  }

The issue here is that the bottom border is removed on the last post but the first is untouched. The first-child is not triggered!

Why is that? Doesn’t first-child and last-child work the same?

Answer 1

You probably have some other element before the first <article>.
:first-child will not apply if it has a non-matching earlier sibling.