05_CSS

기타 선택자

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

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

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

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

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

선택자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인 요소 선택 /
#test5-1 .c5 {
background-color: aquamarine;
}

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

---

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

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

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

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

/ . . 띄어져 있으면 후손, .. 붙어있으면 클래스(선택자)연결 /