html - :last-child works, :first-child doesn't

I have an aside with two

elements. I'm trying to use CSS to
manipulate the :first-child but it doesn't work. However, when
trying to access the :last-child it
does.

rel="noreferrer">JSFiddle

HTML

            
Product Name
 


            

 100 – Small
 
             class="dimension">
 


 


            
 Product Dimensions

            
 
 23.75w

            x
 17.75h
 x
 28d


            
 
 

            
 

200 – Large

class="dimension">

• 
  
  
  Product Dimensions
  
  
  
  29.75w
  
  x
  17.75h
  x
  
  28d
  
  
  





CSS

.sku:first-child
            { 
 display:none !important; /*doesn't hide the first
            child*/
}

.sku:last-child { 
 display:none
            !important; /*does hide the first
            child*/
}

Why
won't :first-child select the first div?