인접 형제 선택자 + 모든형제 선택자 ~ 차이

 

인접 형제 선택자는 인접해 있는 엘리먼트를 선택할 수 있다.

 

h1 + p {} : h1다음에 나오는 첫번째 p 태그

 

html

<h1>기준태그</h1>
<p>첫번째</p><!-- 첫번째 p태그에만 적용 -->
<p>두번째</p>

css

h1 + p {
    color: #0000ff;
}

 

모든 형제 선택자는 해당하는 모든 형제태그를 선택

 

h1~p {} : h1과 인접한 모든 p태그

 

html

<h1>기준태그</h1>
<p>첫번째</p>
<p>두번째</p>
<!-- h1과 인접한 p태그 2개에 모두 적용 -->

css

h1 ~ p {
    color: #0000ff;
}