pseudo-element :first-child not being picked up - css

Question

Given the following snippet, I would expect the div containing "Award 1" to have a red background colour. Can someone explain to me why it does not? The first item should have a border top.
.item-wrap:first-child .item {
border-top: 1px solid black;
}
.item {
width: 100%;
border-bottom: 1px solid black;
}
<div class="row awards">
<div class="col-xs-12">
<h2 class="no-border">Awards</h2>
</div>
<div class="col-xs-12 item-wrap">
<div class="item">Award 1</div>
</div>
<div class="col-xs-12 item-wrap">
<div class="item">Award 2</div>
</div>
</div>

Answer 1

The :first-child CSS pseudo-class represents any element that is the first child element of its parent.
:first-child (https://developer.mozilla.org/en-US/docs/Web/CSS/%3Afirst-child)
In your example you are attempting to select an element with the class .item which resides in a parent with the class .item-wrap which itself is the first child of its parent (in this case .awards). As .item-wrap is not the first child of .awards it does not match.
Given your markup the following rule should fit your needs:
.awards :first-child + .item-wrap .item:first-child {
border-top: 1px solid black;
}
.item {
width: 100%;
border-bottom: 1px solid black;
}
<div class="row awards">
<div class="col-xs-12">
<h2 class="no-border">Awards</h2>
</div>
<div class="col-xs-12 item-wrap">
<div class="item">Award 1</div>
</div>
<div class="col-xs-12 item-wrap">
<div class="item">Award 2</div>
</div>
</div>
This will select an element with the class .item which is the first child of its parent .item-wrap which is immediately preceded by the first child that belongs to the element with the class .awards.

Answer 2

you need to wrap child elements with a parent div like this,
HTML
<div class="row awards">
<div class="col-xs-12">
<h2 class="no-border">Awards</h2>
</div>
<div>
<div class="col-xs-12 item-wrap">
<div class="item">Award 1</div>
</div>
<div class="col-xs-12 item-wrap">
<div class="item">Award 2</div>
</div>
</div>
</div>
CSS
.item-wrap:first-child .item {
background-color:red;
}
http://codepen.io/anon/pen/QjJBQL

Answer 3

.item-wrap:nth-child(2){
background: red;
}
<div class="row awards">
<div class="col-xs-12">
<h2 class="no-border">Awards</h2>
</div>
<div class="col-xs-12 item-wrap">
<div class="item">Award 1</div>
</div>
<div class="col-xs-12 item-wrap">
<div class="item">Award 2</div>
</div>
</div>

Answer 4

.item:first-child{
color: red;
}
<div class="row awards">
<div class="col-xs-12">
<h2 class="no-border">Awards</h2>
</div>
<div class="col-xs-12 item-wrap">
<div class="item">Award 1</div>
<div class="item">Award 1a</div>
</div>
<div class="col-xs-12 item-wrap">
<div class="item">Award 2</div>
<div class="item">Award 2a</div>
</div>
</div>
Place the selector on the child, not the parent (http://codepen.io/anon/pen/vNQamR):
.item:first-child{
color: red;
}