CSS - 복합 선택자

[복합 선택자]

 

일치 선택자(Basic Combinator)

; EF / E 와 F 를 동시에 만족하는 요소 선택.

 
/* span 중에 orange 클래스를 가진 요소를 찾는다 */
span.orange {
    color: red;
}

<div>
    <ul>
        <li>사과</li>
        <li>딸기</li>
        <li class="orange">오렌지</li>
    </ul>
    <div>당근</div>
    <p>토마토</p>
    <span class="orange">오렌지</span>  <!-- 선택 -->        
</div>

 

자식 선택자(Child Combinator)

; E(>)F / E 의 자식 요소 F 를 선택.

 
/* ul 의 자식 요소 중에 orange 클래스를 가진 요소를 찾는다 */
ul > .orange {
    color: red;
}

 
<div>
    <ul>
        <li>사과</li>
        <li>딸기</li>
        <li class="orange">오렌지</li>  <!-- 선택 --> 
    </ul>
    <div>당근</div>
    <p>토마토</p>
    <span class="orange">오렌지</span>
</div>

 

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

; E( )F / E 의 후손(하위) 요소 F 를 선택.

 
 
/* div 가 가지고 있는 요소들 중에 orange 클래스를 찾는다 */
div .orange {
    color: red;
}

<div>
    <ul>
        <li>사과</li>
        <li>딸기</li>
        <li class="orange">오렌지</li>  <!-- 선택 --> 
    </ul>
    <div>당근</div>
    <p>토마토</p>
    <span class="orange">오렌지</span>  <!-- 선택 -->        
</div>

 

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

; E(+)F / E 의 다음 형제 요소 F 하나만 선택.

 
 
/* orange 클래스를 가진 요소의 "다음" li 요소를 찾는다 */
.orange + li {
    color: red;
}

<ul>
    <li>사과</li>
    <li>딸기</li>
    <li class="orange">오렌지</li>
    <li>망고</li>   <!-- 선택 -->
    <li>토마토</li>
</ul>

 

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

; E(~)F / E 의 다음 형제 요소 F 모두 선택.

 
 
/* orange 클래스를 가진 요소의 다음 "모든" li 요소를 찾는다 */
.orange ~ li {
    color: red;
}

<ul>
    <li>사과</li>
    <li>딸기</li>
    <li class="orange">오렌지</li>
    <li>망고</li>   <!-- 선택 -->
    <li>토마토</li> <!-- 선택 -->
</ul>