CSS 선택자(SELECTOR) #5

📝 CSS 개요 및 선택자(SELECTOR)
#230213

:only-child
특정 요소의 자식이 하나밖에 없을 때 선택 (타입 상관없이)

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

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

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

#test3 > p:empty {
background-color: lime;
height: 30px;}
-------------------------------------------
<div id="test3">
<p></p>             
<p>123</p>              // 글자
<p>         </p>        // 띄어쓰기
<p><strong>하이</strong></p> //태그
</div>

✔️ 여러 선택자 동시 선택

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

[작성법]
선택자1, 선택자2, 선택자3, ..... { css 코드 ; }

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

✔️ 특정 요소 내부에 있는 특정 클래스만 선택

1) #test5-1의 후손 중 클래스가 c5인 요소 선택

#test5-1 .c5 {
    background-color: aquamarine; }
--------------------------------------
<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>

2) #test5-2의 자식 중 클래스가 c5인 li요소만 선택

#test5-2 > li.c5 {
    background-color: aqua;}
--------------------------------- 
<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 > li 띄어쓰기 c5 로 쓰면
li의 후손인 c5중에 찾아서 결과값이 9,10만 색칠됨

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

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

클래스 명이 여러개 요소로 되어있는것만 출력하는게 맞나요..........?

.test6.c6 {
    background-color: red;}
----------------------------------------
 <div class="test6">테스트</div>
 <div class="test6 c6">테스트</div>   // 해당문구 출력
 <div class="c6">테스트</div>