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.

JSFiddle

HTML

  
Product Name
  

    


      100 – Small
    
    

      

        

          
            Product Dimensions
          
          
            23.75w

            x
            17.75h
            x
            28d
          
        
      
    
  
  


    

      200 – Large
    
    

      

        

          
            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?

Answer

You cannot use :first-child psuedo class since .sku is not the first child. A better option is to use either :first-of-type (for first child) or :nth-of-type (which can accept a number or an equation) pseudo classes:

.sku:nth-of-type(1) {
    display: none;

}

Updated Demo