现在您正在测试container-soc是否是其父元素的第一个子元素，它确实是。
相反，您应该基于a标记进行选择。

.soc-box a:nth-of-type(1) .container-soc {background-color: red}

<div class="soc-box">
  <a href="http://sample.com">
      <div class='container-soc'>
        <img src="img/tel.svg" class='iconDetails'>
        <div class="texti">
          <h4>Item 1</h4>
        </div>
      </div>
  </a>
  <a href="http://sample.com">
     <div class='container-soc'>
        <img src="img/twitter.svg" class='iconDetails'>
        <div class="texti">
          <h4>Item 2</h4>
       </div>
     </div>
  </a>
<div>

:nth-child(x)取父元素的第x个元素，即每个元素都是一个。
在两个的情况下，它将是每隔一个元素。
:first-child将用作选择器

.soc-box a:first-child .container-soc {
  background-color: red
}

<div class="soc-box">

  <a href="http://sample.com">
    <div class='container-soc'>
      <img src="img/tel.svg" class='iconDetails'>
      <div class="texti">
        <h4>Item 1</h4>
      </div>
    </div>
  </a>

  <a href="http://sample.com">
    <div class='container-soc'>
      <img src="img/twitter.svg" class='iconDetails'>
      <div class="texti">
        <h4>Item 2</h4>
      </div>
    </div>
  </a>

</div>