기타 선택자

:only-child

특정 요소의 자식이 하나밖에 없을 때 선택
(전체 자식 태그 1개일 때만 됨)

html code

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

css code

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

:only-of-type

특정 요소의 자식 중 지정된 형태와 같은 자식 요소가 하나만 있을 때 선택
(지정한 태그만 유일하면 됨)

html code

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

css code

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

:empty

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

자식 요소 개념

• 태그, 글자, 띄어쓰기 모두 자식 요소라고 함

html code

<div id="test3">
	<p></p>
	<p>123</p>
	<p>      </p>
	<p>
		<strong>하이</strong>
	</p>
</div>

css code

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

여러 선택자 동시 선택

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

html code

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

css code

#test4-1, #test4-2, .test4-3 {
    background-color: teal;
    color: yellowgreen;
}

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

html code

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

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

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

test5-2 자식 중 class가 c5인 li 태그
(띄어쓰기 없음)

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

html code

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

css code

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

(띄어쓰기 없음)