HTML/CSS specify border-color in first DIV

Question

I can not manage this situation:

 <div class="list">
    <div class="bar">
       <header></header>
       <div class="content"></div>
    </div>
    <div class="item">
       <header></header>
       <div class="content"></div>  //select this
    </div>
    <div class="item">
       <header></header>
       <div class="content"></div>
    </div>
 </div>

CSS

.list > .item:first-child .content {
   border-color: red;
}

I tried many solutions:

1. .list > .item:nth-of-type(1) .content { border-color: red; }
2. .list > div.item:first-child .content { border-color: red; }
3. .list .item:first-child .content { border-color: red; }

but no any result.

Answer 1

Quick note. The :nth-of-type selector selects only tags for now.

The :nth-of-type() CSS pseudo-class matches elements of a given type, based on their position among a group of siblings.

If I understand correctly, you are looking for this:

.list > div:nth-of-type(2) .content {
  border: 1px solid;
  border-color: red;
}

<div class="list">
  <div class="bar">
    <header>Head</header>
    <div class="content">
      Content 1
    </div>
  </div>
  <div class="item">
    <header>Head</header>
    <div class="content">
      Content 2
    </div>
  </div>
  <div class="item">
    <header>Head</header>
    <div class="content">
      Content 3
    </div>
  </div>
</div>

On a different note, you need to set the border-width and border-style to make sure the border is displayed.