css에 +가 어쩐 일로...?

css 선택자 중에 +라는 당황스러운 선생님(?)이 계시다. +는 자식 요소가 아니라 같은 레벨에 있는 바로 옆! 요소를 선택하는 것이다. html에 작성하는 기준으로 말하자면 바로 내 밑에 있는 요소..라고 해야하나?

<p>
  <p>hi</p>
</p>
<p>
  안뇽
</p>

여기에서 '안뇽'을 선택하려면 아래와 같이 작성한다.

p + p {
  color: purple;
}

'hi'를 선택하려면 아래처럼 작성한다.

p > p {
  color: purple;
}

왜냐면 안뇽의 p는 첫번째 p와 같은 레벨이며 바로 다음에 있기 때문이다. 반면 hi의 p는 첫번째 p의 자식 요소이기 때문에 > 을 사용하여 선택한다.

어휴, + 와 > 가 순간 헷갈려서 이렇게 한 번 정리한다.