CSS 선택자 5

기타 선택자

:only-child

• 특정 요소의 자식이 하나밖에 없을 때 선택
  💡 전체 중에 하나여야 한다

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

➡️ <p>가 아니라 <pre> 등 다른 태그여도 자식 요소가 1개 이상이면 선택되지 않는다

#test1 > p:only-child {
    background-color: steelblue;
}

:only-of-type

• 특정 요소의 자식 중 지정한 형태와 같은 자식 요소가 하나만 있을 때 선택
  💡 자식 수와 상관없이 해당 지정 요소가 하나만 있을 때 선택함

    <div id="test2">
        <p>자식 1</p>
        <pre>자식 2</pre>
    </div>

➡️ <p>가 오직 하나면 됨

#test2 > p:only-of-type {
    background-color: red;
}

:empty

• 자식 요소가 없는 요소를 선택
  🙋 자식 요소 개념 : 태그, 글자, 띄어쓰기 모두 자식 요소라고 함

   <div id="test3">
        <p></p> <!--p 태그 안에 자식요소가 없음-->
        <p>123</p>
        <p>         </p>
        <p><strong>하이</strong></p>
    </div>

➡️ p 태그에 자식요소가 없는 것

#test3 > p:empty {
    background-color: greenyellow;
    height : 30px;
}

여러 선택자 동시 선택

• 같은 스타일을 지정하고 싶으나 요소를 선택하는 선택자가 일치하지 않을 때 사용
  ⭐작성법⭐
  `선택자1, 선택자2, 선택자3, ... {css 코드 ; }

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

#test4-1, #test4-2, .test4-3 {
    background-color: yellow;
    color:red;
}

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

예시 1)

    <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>

➡️ #test5-1의 후손 중 클래스가 c5인 요소를 선택
➡️ 후손 선택은 띄어쓰기

#test5-1  .c5{
    background-color: aqua;
}

예시 2)

    <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-2의 자식 중 클래스가 c5인 li요소만 선택
➡️ 6,7,8만 (class명이 c5인 li태그)

#test5-2 > li.c5{
    background-color: tomato;
}

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

⭐작성법⭐
안에 작성되어 있는 class들을 다 붙여쓴다

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

클래스가 두 개인 test6을 선택

.test6.c6 {
    background-color: red;
}