CSS - 복합 선택자(Combinator)

일치 선택자(Basic Combinator)

• E 와 F 를 동시에 만족하는 요소 선택

span.orange {
    color : red;
}

<div>
    <ul>
        <li>사과</li>
        <li>배</li>
        <li class=“orange”>오렌지</li>
    </ul>
    <div>당근</div>
    <p>토마토</p>
    <span class=“orange”>오렌지</span>   <!— 선택 —>
</div>

설명

태그 선택자 span을 찾아 클래스 선택자를 선택. 태그를 사용하면서 클래스를 사용한 선택자 

 

 

자식 선택자(Child Combinator)

• E 의 자식 요소 F 를 선택

• ‘>' 가 선택자의 기호

ul > .orange {
    color : red;
}

<div>
    <ul>
        <li>사과</li>
        <li>배</li>
        <li class=“orange”>오렌지</li>   <!— 선택 —>  
    </ul>
    <div>당근</div>
    <p>토마토</p>
    <span class=“orange”>오렌지</span>   
</div>

설명

태그 선택자 ul을 찾아 자식인 클래스 선택자 선택. 부모를 기준으로해서 자식을 찾음

 

 

후손(하위) 선택자(Descendant Combinator)

• E 의 후손(하위) 요소 F 를 선택

• '띄어쓰기' 가 선택자의 기호

div .orange {
    color : red;
}

<div>
    <ul>
        <li>사과</li>
        <li>배</li>
        <li class=“orange”>오렌지</li>   <!— 선택 —>  
    </ul>
    <div>당근</div>
    <p>토마토</p>
    <span class=“orange”>오렌지</span>   <!— 선택 —>
</div>

설명

태그 선택자 div를 찾아 후손(하위) 선택자인 클래스 선택자 선택

 

 

인접 형제 선택자(Adjacent Sibling Combinator)

• E 의 다음 형제 요소 F 하나만 선택

• ‘+’ 가 선택자의 기호

.orange + li {
    color : red;
}

<div>
    <li>딸기</li>
    <li>수박</li>
    <li class=“orange">오렌지</li>
    <li>망고</li>                     <!— 선택 —>
    <li>사과</li>
</div>

설명

클래스 선택자 orange 를 찾아 인접해 있는 다음 형제 요소 태그 선택자 li 선택

 

 

일반 형제 선택자(General Sibling Combinator)

• E 의 다음 형제 요소 F 모두 선택

• ‘~’가 선택자 기호

.orange + li {
    color : red;
}

<div>
    <li>딸기</li>
    <li>수박</li>
    <li class=“orange">오렌지</li>
    <li>망고</li>                     <!— 선택 —>
    <li>사과</li>                     <!— 선택 —>
</div>

설명

클래스 선택자 orange 를 찾아 인접해 있는 다음 형제 요소 태그 선택자 li 모두 선택

 

 

 

 

출처 : heropy.org