CSS (3)

: only-child

: only-of-type

: empty

 <!-- :empty에 해당하는 요소 예시 -->
 <div></div>

複数の選択者を同時に選択します。

선택자1,선택자2,선택자3....{CSS코드}
' , ' 으로 구분.

特定の要素の内部にある特定のクラスのみを選択します。

    <ul id="test5-1">
        <li class="c5">1</li>
        <li class="c5">2</li>
        <li class="c5">3</li>
        <li>4</li>
        <li>5</li>
    </ul>

    <ul id="test5-2">
        <li class="c5">6</li>
        <li class="c5">7</li>
        <li class="c5">8</li>
        <li><span class="c5">9</span></li>
        <li><span class="c5">10</span></li>

        
    <p class="c5">11</p>
    <p class="c5">12</p>
      
    </ul>

#test5-1 .c5{
    background-color: aqua;
}  //test5-1에 모든 후손(띄어쓰기)의 백그라운드 색을 지정.

#test5-2>li.c5{
    /* #test5-2의 자식중
        클래스가 c5인 li 요소만 선택 */
    background-color: khaki;
} //test5-2안의 li에 c5클래스에 백그라운드색을 지정

複数のクラス要素を持つ要素の場合

<h2>클래스가 여러개인 요소만 선택</h2>

    <div class="test6">테스트</div>
    <div class="test6 c6">테스트</div>
    <div class="c6">테스트</div>

.test6.c6{
   background-color: brown;
} //test6 와 c6클래스를 가진 요소 선택