CSS) 후손 선택자 / 자손 선택자 / 인접, 일반 형제 선택자 정리

선택자	적용 대상	예제
후손 선택자 : 부모 후손	부모 내부의 모든 하위 요소	div p
자손 선택자 : 부모 > 자식	부모의 직속 자식만	div > p
인접 형제 선택자 : 형제1 + 형제2	특정 요소 바로 다음 형제	h1 + p
일반 형제 선택자 : 형제1 ~ 형제2	특정 요소 이후의 모든 형제	h1 ~ p

후손 선택자 : 부모 안의 모든 하위 요소에 적용

자손 선택자 : 직속 자식에게만 적용

형제 선택자 : 같은 부모를 가진 요소들 중 특정 위치의 형제 선택

---

1. 후손 선택자( Descendant Selector )

부모요소 후손요소 {
    스타일 속성;
}

: 모든 하위 요소(자손 + 후손)를 선택하는 방식

: 부모 요소 안에 있는 모든 하위 요소(직접 포함된 자식뿐만 아니라 그 안의 후손까지 모두 포함)

 

예제:

div p a {
    background-color: blue;
    color: white;
}

: div 안의 p 안의 a 태그에 스타일 적용

: div > p > a와 동일한 효과

<div>
    <p>
        <a href="#">네이버</a> <!-- 적용됨 -->
    </p>
    <section>
        <p>
            <a href="#">구글</a> <!-- 적용됨 -->
        </p>
    </section>
</div>

: div 안에 포함된 모든 p 요소 내부의 a 태그에 스타일이 적용됨

: div > p > a와 다르게 중첩된 section 내부의 a 태그에도 적용됨

---

2. 자손 선택자( Child Selector )

부모요소 > 자식요소 {
    스타일 속성;
}

: 직속 자식(1단계 아래에 있는 요소)만 선택하는 방식

: 중첩된 후손 요소에는 적용되지 않음

 

예제:

h1 > em {
    background-color: red;
    color: yellow;
}

: h1 태그의 직속 자식인 em 태그에만 적용됨

<h1>
    제목입니다 <br>
    <em>이것은 em 태그입니다</em>  <!-- 적용됨 -->
    <span>
        <em>중첩된 em 태그입니다</em>  <!-- 적용 안 됨 -->
    </span>
</h1>

: h1 내부에서 직속 자식인 em만 스타일 적용됨

: span 안에 있는 em 태그에는 적용되지 않음

후손 선택자 vs 자손 선택자 차이

div p {
    color: red;
}
div > p {
    color: blue;
}

<div>
    <p>이건 파란색(blue)</p> <!-- div의 직속 자식 -->
    <section>
        <p>이건 빨간색(red)</p> <!-- div의 후손이지만 직속 자식이 아님 -->
    </section>
</div>

: div > p { color: blue; } → div의 직속 자식 p만 파란색

: div p { color: red; } → div의 모든 후손 p가 빨간색

:결과적으로 section 내부의 p만 빨간색이 됨

---

3. 인접 형제 선택자( Adjacent Sibling Selector )

형제요소1 + 형제요소2 {
    스타일 속성;
}

형제 요소란? 같은 부모 안에서 나란히 있는 요소

: 특정 요소 바로 다음에 있는 형제 요소만 선택

 

예제:

h1 + p {
    color: green;
    background-color: blue;
}

: h1 바로 다음에 오는 p 태그에만 적용됨

<h1>제목</h1>
<p>이건 적용됨 (h1 다음 p)</p> <!-- 적용됨 -->
<p>이건 적용 안됨</p> <!-- 적용 안됨 -->

: h1 바로 다음에 위치한 p 태그만 적용됨

---

4. 일반 형제 선택자( General Sibling Selector )

형제요소1 ~ 형제요소2 {
    스타일 속성;
}

: 특정 요소 이후에 나오는 모든 형제 요소에 스타일 적용

 

예제:

h1 ~ p {
    color: green;
}

: h1 뒤에 있는 모든 p 태그에 적용됨

<h1>제목</h1>
<p>이건 적용됨</p> <!-- 적용됨 -->
<p>이것도 적용됨</p> <!-- 적용됨 -->

: h1 이후 나오는 모든 p 요소에 스타일 적용됨

 

CSS) 그룹 선택자 / 가상 클래스 선택자 / 수열 선택자 정리