📚 인접 형제 선택자

---

📕 + 선택자

기본 문법

A + B {
...
}

• A와 같은 부모를 가지면서, 바로 다음에 나오는 B 요소만 선택된다.
• A와 B 사이에 다른 요소가 있으면 적용되지 않는다.

예제

<h1>첫번째 제목</h1>
<p>이 문장은 빨간색이 됩니다.</p>
<p>이 문장은 영향을 받지 않습니다.</p>

h1 + p {
 color: red;
}

• 첫 번째 <h1> 바로 뒤에 오는 <p>만 빨간색으로 변경된다.
• 두 번째 <p>는 스타일이 적용되지 않는다.
• h1과 같은 부모를 가진 p 중에서 바로 뒤에 위치한 한 개만 선택되는 것이다.

---

📗 ~ 선택자

기본 문법

A ~ B { 
  ...
}

• 같은 부모를 가진 A 뒤에 위치하는 모든 B 요소를 선택한다.
• 바로 뒤가 아니라도 선택 가능하다. (형제 관계만 유지하면 된다.)

예제

<input type="radio" id="img-1" name="carousel" checked>
<input type="radio" id="img-2" name="carousel">
<input type="radio" id="img-3" name="carousel">

<div class="carousel__dots">
  <label id="img-dot-1" for="img-1"></label>
  <label id="img-dot-2" for="img-2"></label>
  <label id="img-dot-3" for="img-3"></label>
</div>

input#img-1:checked ~ .carousel__dots label#img-dot-1,
input#img-2:checked ~ .carousel__dots label#img-dot-2,
input#img-3:checked ~ .carousel__dots label#img-dot-3 {
  background-color: black;
  opacity: 1;
}

• input#img-1:checked ~ .carousel__dots label#img-dot-1
  • #img-1이 체크되면 #img-dot-1의 스타일이 변경된다.
• 현재 선택된 슬라이드에 해당하는 도트 버튼을 강조하는 역할을 한다.

---

📘 ~ vs +(인접 형제 선택자)의 차이

선택자	의미	적용 대상
A + B	A 바로 뒤에 나오는 B	A와 바로 인접한 B 1개
A ~ B	A 뒤에 나오는 모든 B	A와 같은 부모를 가진 모든 B

예제

h1 + p { color: red; } /* h1 바로 뒤의 p만 선택 */
h1 ~ p { color: blue; } /* h1 뒤에 오는 모든 p 선택 */

---