[CSS] 05_CSS 선택자 5

기타 선택자

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

[HTML]

<div id="test1">
        <p>자식1</p>
        <pre>자식2</pre>
    </div>
    
[CSS]

#test1 > p:only-child{
    background-color: steelblue;
}
-> pre가 없으면 p가 유일한 자식이라 색이 적용 되지만 현재 자식이 2개라 색깔 적용 안됨

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

[HTML]

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

[CSS]

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

:empty
: 자식 요소가 없는 요소를 선택

-> 자식요소의 개념?
태그, 글자, 띄어쓰기 모두를 자식요소라고 함

[HTML]

 <div id="test3">
        <p></p>

        <p>123</p>

        <p>     </p>

        <p> <strong>하이</strong> </p>
    </div>
    
[CSS]

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

여러 선택자 동시 선택

: 같은 스타일을 지정하고 싶으나 요소를 선택하는 선택자가 일치하지 않을 때 사용

선택자1, 선택자2, 선택자3, ... { css 코드; }

[HTML]

 <div id="test4-1">테스트1</div>
 <div id="test4-2">테스트2</div>
 <div class="test4-3">테스트3</div>
 
 [CSS]
 
 #test4-1, #test4-2, .test4-3 {
    background-color: yellow;
    border: 3px solid black;
    margin-bottom: 10px;

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

[HTML]

<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>
    
 [CSS]
 
 /* #test5-1 의 후손 중 클래스가 c5인 요소 선택 */
#test5-1 .c5 {
    background-color: aquamarine;
}

/* #test5-2의 자식 중 클래스가 c5인 li요소만 선택 */
#test5-2 > li .c5 {
    background-color: aqua;
}

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

[HTML]

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

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