selector2.html

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <style>
        /*
        .orange{
            color: orange
        }
         */
    /* 일치 선택자
        
        아래 코드는 정확하게 span이라는 테그의 orange 클래스를 선택한 것 
        span.orange{
            color: red;
        }
    */
    
    /* 자식 선택자

            그런데 li테그처럼 여러개가 있는 테그나 똑같은 클래스가 여러개가 있는 경우는 어떻게 할 것인가?
            자식 선택자를 활용하면 된다 
            자식선택자는 > 기호를 활용한다.
       
            ul이라는 클래스에서 오렌지 테그를 가진 코드에만 적용
            ul > .orange {
                color:goldenrod
            } 
    */

    /*  하위(후손) 선택자
        자식의 자식 코드까지 선택하는 선택자 
        자식 선택자 코드에서 >를 빼고 그냥 한칸 띄우면 된다.
    
        div .orange {color : red;} */

    /* 인접 형제 선택자 
        .orange + li {color: pink; }
    */

    /* 일반형제선택자 
        나머지 모든 형제들을 다 선택할 수 있다.*/
        .orange ~ li{color : hotpink}
    
    
    </style>
</head>
<body>
    <div>
        <ul>
            <li>딸기</li>
            <li>키위</li>
            <li>수박</li>
            <li class="orange">오렌지</li>
            <li>복숭아</li>
            <li>망고</li>
        </ul>

        <div>토마토</div>
        <div>양상추</div>
        <div>파프리카</div>
        <span>청경채</span><br>
        <span class="orange">오렌지</span>
    </div>
    <span class="orange">오렌지</span>
</body>
</html>