CSS - 第一个孩子没有按预期工作

Question

我有5个div。

<div class="itemA">First of Item A</div>
<div class="itemA"></div>
<div class="itemB">First of Item B</div>
<div class="itemB"></div>
<div class="itemB"></div>

我想将background-color: #ccc应用于itemA的第一个元素，以及ItemB的第一个元素。这只是唯一的解决方案对我有用，因为我通过另一个解决方案的一部分来解决这个问题。

所以，这是我的CSS：

.itemA, .itemB{
  width: 200px;
  height: 30px;
  border-top: 2px solid #fff;
  background-color: #000;
}

.itemA:first-child,
.itemB:first-child{
  background-color: #ccc;
}

这是期望：

Unexpected (actual working):
- Gray
- Black
- Black
- Black
- Black

Expected:
- Gray
- Black
- Gray
- Black
- Black

我做得不好，这个问题的解决方案是什么？

JSfiddle