css 공부 : 가상클래스 nth-child 이해하기

X

<li>
  <span></span>
  <p>빨강</p>
  <div></div>
</li>
<li>
  <span></span>
  <p>파랑</p>
  <div></div>
</li>

li > span:nth-child(2) {
  color: red;
}

이거는 li 안에 형제가 span p div 있고 nth-child(2)해도 안된다. 그 이유는
span 의 2번째 형제요소를 가르키는데 2번째가 span 아니고 p 라서 안된다.

O

<li>
  <span></span>
  <span>빨강</span>
  <span></span>
</li>

span:nth-child(2) {
  color: red;
}

이거는 li 안에 형제가 span 으로 3개가 있고 nth-child(2)하면 span 의 2번째가 형제요소span 이라서 적용이 된다.