nth-child (1) влияет на все DIV

Question

Когда я использую soc-box:nth-child(1) {background-color : red} ИЛИ .container-soc:nth-child(1) {background-color : red}, он применяется ко всем div, но я хочу, чтобы он просто применялся к первому div.

Это произошло, когда я обернул тег <a> вокруг своих элементов.

.container-soc:nth-child(1) {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>

Answer 1

: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>

Answer 2

верно, вы не проверяете, является ли 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>