CSS 선택자5

▶ 기타 선택자

• :only child
  : 특정 요소의 자식이 하나밖에 없을 때 선택

    <div id="test1">
        <p>자식1</p>
        <!-- <pre>자식2</pre> -->
    </div>

/* :only-child */
#test1>p:only-child{
    background-color: antiquewhite;
}

---

• :only-of-type
  : 특정 요소의 자식 중에서 지정된 형태와 같은 자식 요소가 하나만 있을 때 선택

    <div id="test2">
        <p>자식1</p>
        <pre>자식2</pre>
        <!-- <p>자식1</p> -->
        <!-- 만약 <p>태그가 하나 더 존재하면 CSS코드 적용 안 됨 -->
    </div>

/* :only-of-type */
#test2>p:only-of-type{
    background-color: antiquewhite;
}

---

• :empty
  : 자식 요소가 없는 요소를 선택
  ※ 자식 요소란? 태그, 글자, 띄어쓰기 모두를 자식 요소라고 함
  예를 들어, <div></div> 해당 태그에 자식 요소는 존재하지 않음

    <div id="test3">
        <p></p>
        <p>123</p>
        <p>        </p>
        <p><strong>strong 태그</strong></p>
    </div>

/* empty */
#test3>p:empty{
    height: 30px;
    background-color: aquamarine;
}

---

• 특정 요소 내부에 있는 특정 클래스만 선택하기

    <ul id="test4-1">
        <li class="c4">1</li>
        <li class="c4">2</li>
        <li class="c4">3</li>
        <li>4</li>
        <li>5</li>
    </ul>

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

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

/* 특정 요소 내부에 있는 특정 클래스만 선택 */

/* 아이디가 test4-1의 "후손" 중 클래스가 c4인 요소를 선택 */
#test4-1 .c4{
    background-color: aqua;
}

/* 아이디가 test4-2의 자식 중 클래스가 c4인 li 요소만 선택 */
#test4-2>li.c4{
    background-color: blue;
}

---

• 여러 선택자 동시 선택
  : 같은 스타일을 지정하고 싶으나
    요소를 선택하는 선택자가 일치하지 않을 때 사용
  
  - [ 작성법 ]
  : 선택자1, 선택자2, 선택자3, ...{ CSS코드; }

    <div id="test5-1">테스트1</div>
    <div id="test5-2">테스트2</div>
    <div id="test5-3">테스트3</div>

/* 여러 선택자 동시 선택 */
/* test5-1, test5-2, test5-3 배경색을 red로 변경 */
#test5-1, #test5-2, #test5-3{
    background-color: red;
}

---

• 클래스가 여러 개인 요소만 선택

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

/* 클래스가 여러 개인 요소만 선택 */
/* 클래스가 test6, c6을 모두 가진 요소만 테두리 1px solid black으로 변경 */
.test6.c6{
    border: 1px solid black;
}