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클래스를 가진 요소 선택