Why :first-child selector not working on div?

Question

I am selecting specific divs with the :first-child and :last-child pseudo selectors but :first-child is not working in any browser I have checked it in.

I've checked caniuse.com and css-tricks.com and the consensus is that :first-child is pretty widely supported so I'm thinking maybe there is some bug I am not aware of. I am running the app on a local node server. I have validated both my css and my html. Is anyone aware of any bugs that might prevent :first-child from working?

HTML

<div class="col-md-6 blurbs">
 <label>NEWS</label>
 <div>
  <p>Lorem ipsum dolor spernatur aut odit aut fugit conse oluptate</p>
 </div>
 <div class="clearfix">
  <a class="pull-left">RSS</a>
  <a class="pull-right">MORE NEWS</a>
 </div>
 </div>

CSS

(not working)

.news .blurbs div:first-child{
    outline: 1px solid red;
    height: 260px;
    overflow: auto;
    margin-bottom: 10px;
}

(working)

.news .blurbs div:last-child{
    outline: 1px solid red;
    width: 95%;
}

Answer 1

The :first-child and :last-child pseudo-classes select the element that is the first/last child of the parent, filtered by any other chained selector, so div:first-child does not actually match anything as the first child within .blurbs is not a div.

What you need to use to get the effect you are after is the :first-of-type pseudo-class like this:

.news .blurbs div:first-of-type{
    outline: 1px solid red;
    height: 260px;
    overflow: auto;
    margin-bottom: 10px;
}

here is a working example