: last child working: first child not

Question

I have asidewith two elements <div class="sku">. I am trying to use CSS for control :first-child, but it is not working. However, when trying to access :last-childit does.

Jsfiddle

HTML

<aside>
  <h1>Product Name</h1>
  <div class="sku">
    <h3>
      100 – Small
    </h3>
    <div class="dimension">
      <ul>
        <li>
          <span class="title">
            Product Dimensions
          </span>
          <span class="specs">
            23.75w
            x
            17.75h
            x
            28d
          </span>
        </li>
      </ul>
    </div>
  </div>
  <div class="sku">
    <h3>
      200 – Large
    </h3>
    <div class="dimension">
      <ul>
        <li>
          <span class="title">
            Product Dimensions
          </span>
          <span class="specs">
            29.75w
            x
            17.75h
            x
            28d
          </span>
        </li>
      </ul>
    </div>
  </div>
</aside>

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 :first-childnot select the first div?

Answer 1

You cannot use the :first-childpsuedo class since it is .skunot the first child. It is best to use either :first-of-type(for the first child) or :nth-of-type(which can take a number or equation) pseudo-classes:

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

Updated demo

Answer 2

The: first-child . H1. . :

h1 + .sku { }

, HTML.