복합 선택자

1. 일치 선택자

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

// css
span.orange {
    color: red;
}

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

 

2. 자식 선택자

• E의 자식 요소 F를 선택
• E > F

// css
ul > .orange {
    color: red;
}


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

 

3. 후손(하위) 선택자

• E의 후손(하위) 요소 F를 선택
• E 태그 내에 모든 하위태그들은 후손을 의미
• E F

// css
div .orange {
    color: red;
}

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

 

4. 인접 형제 선택자

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

// css
.orange + li {
    color: red;
}

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

 

5. 일반 형제 선택자

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

// css
.orange ~ li {
    color: red;
}

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

 

태그 가계도

• 후손 요소(하위 요소) = 태그 내에 존재하는 모든 하위 요소들 포함
• 조상 요소(상위 요소) = 자신의 태그를 감싸고 있는 모든 상위 요소들 포함