CSS 선택자(Selector) - (2) 복합 선택자

1. 자식 선택자
2. 후손 선택자
3. 동위 선택자

 

1. 자식(자손) 선택자

 부모 요소 > 자식 요소 

자식 선택자는 특정 요소의 바로 아래 요소인 자식 요소를 선택하는 선택자입니다.

 

' > ' 기호를 사용해 양쪽 요소의 부모 자식 관계를 표현합니다.

 

자식 요소를 선택할 때는 태그, class, id, 속성 선택자 등을 사용할 수 있습니다.

 

<!-- 예시1 -->
<fieldset>
    <ul> 
        <li class="dogs"> 강아지
            <p id="dog">강아지는 개과 동물입니다. </p>
        </li>
        <li class="cats"> 고양이
            <p>고양이는 고양이과 동물입니다. </p>
        </li>
        <li class="bears"> 판다
            <p>판다는 곰과 동물입니다.</p>   
    </ul>
</fieldset>

위의 예시에서, <ul>은 <fieldset>의 자식 요소입니다.

 

따라서 자식 선택자를 이용해 <ul> 요소를 선택하고 싶다면 다음과 같이 작성할 수 있습니다.

 

 

fieldset > ul{ font-weight: bold; }

 

그런데 자식 선택자는 부모 요소 바로 아래에 위치한 요소만을 선택할 수 있습니다.

 

 

fieldset > p{ color: green; }

만약 위와 같이 작성한 경우, <p>요소는 <fieldset>의 바로 아래 요소, 즉 자식 요소가 아니기 때문에 선택되지 않습니다.

 

만약 자식 선택자를 사용해 <p>요소를 선택하고 싶다면 아래와 같이 자식 선택자를 중첩해서 사용해 선택할 수 있습니다.

fieldset > ul > li > p{ color: green; }

 

2. 후손 선택자

 부모 요소   후손 요소 

후손 선택자는 부모 요소의 특정한 하위 요소를 전부 선택하는 선택자입니다.

부모 요소 후손 요소 사이에 띄어쓰기를 해서 두 요소의 관계를 표현합니다.

 

후손 선택자는 자식 선택자와 달리 바로 아래에 있는 요소가 아니어도 선택할 수 있습니다.

fieldset p{ color: green; }

따라서 위와 같이 작성하면, <fieldset>의 후손 요소인 <p> 태그를 선택할 수 있게 됩니다.

 

3. 형제 선택자

형제 선택자는 같은 부모를 가진 자식 요소, 즉 형제 관계에 있는 요소를 선택할 때 사용할 수 있는 선택자입니다.

•  A요소 + B요소  : A요소의 형제 요소 중 A요소 바로 다음에 오는 B요소만 선택하는 선택자입니다. 인접 형제 선택자라고도 불립니다.
•  A요소 ~ B요소  : A요소의 형제 요소 중 A요소 뒤에 있는 모든 B요소를 선택하는 선택자입니다. 일반 형제 선택자라고도 불립니다.

 

.dogs + li{color: red;}

위와 같이 인접 형제 선택자를 사용한 경우, '.dogs'를 속성으로 가진 요소의 바로 다음 요소,

즉 <li class="cats"> 요소가 선택됩니다.

 

.dogs ~ li{color: red;}

일반 형제 선택자를 사용했다면, '.dogs'를 속성으로 가진 요소 다음에 나오는 모든 <li> 요소,

즉 <li class="cats"> 요소와 <li class="bears"> 요소가 모두 선택됩니다.