CSS선택자_02_복합선택자

복합선택자

1. 일치 선택자(Basic Combinator) : 두 가지 조건을 동시에 만족하는 요소 선택

> span.orange{/*일치 선택자, span태그의 orange 클래스*/
    color:red;
}

1. 자식 선택자(Child Combinator) : ~의 자식 요소 -를 선택

*자식요소 : 특정 요소 바로 아래에 속한 요소

> ul>.orange{/*ul의 자식요소중에서 orange 클래스*/
    color: red;
}

1. 후손(하위) 선택자(Descendant Combinator) : ~의 후손(하위) 요소 -를 선택 (띄워쓰기 사용)

*후손요소 : 특정 요소 이하의 모든 요소

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>
 

1. 인접 형제 선택자(Adjacent Sibling Combinator) : ~의 다음 형제 요소 - 하나만 선택

*형제요소 : 부모요소가 같은 요소

> .orange + li{/*orange 클래스의 다음 형제요소*/
    color: red;
}
<ul>
    <li>딸기</li>
    <li class="orange">오렌지</li>
    <li>망고<li> <!--선택-->
</ul>

1. 일반 형제 선택자(General Sibling Combinator) : ~의 다음 형제 요소 - 모두 선택

> .orange ~ li{/*orange 클래스의 다음 일반 형제요소들 모두*/
    color: red;
}
    <ul>
        <li>딸기</li>
        <li>수박</li>
        <li class="orange">오렌지</li>
        <li>망고</li>
        <li>사과</li>
    </ul>