[CSS] 기본 선택자와 복합선택자

 

기본 선택자

 

1. 전체 선택자(Universal Selector) : 모든 요소를 선택

*{
    color:red;
}

 

 

2. 태그 선택자(Type Selector) : 태그이름이 ~~인 요소 선택

li{
    color: red;
}

 

 

3. 클래스 선택자(Class Selector) : HTML 태그의 class 속성의 값이 ~~인 요소 선택

.orange{
    color: red;
}

 

 

4. 아이디 선택자(ID Selector) : HTML id 속성의값이 ~~인 요소 선택

#orange{
    color: red;
}

 

 

복합선택자

 

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

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

 

 

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

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

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

 

 

3. 후손(하위) 선택자(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>

 

 

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

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

.orange + li{/*orange 클래스의 다음 형제요소*/
    color: red;
}

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

 

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

.orange ~ li{/*orange 클래스의 다음 일반 형제요소들 모두*/
    color: red;
}

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