[CSS 선택자(3)]

[선택자 결합]

• 하위 선택자 결합 : 해당 선택자 내에 해당하는 다른 선택자를 결합. 좀 더 세부적으로 선택할 수 있습니다.
  형태) (선택자) (선택자) { (내용) }
  이 때, 선택자와 하위 선택자의 구분은 띄어쓰기로 합니다.

/* 예시(CSS) */

ul li:last-child {
  color:red;
}

/* <ul>에 있는 항목 중 마지막 순서의 <li>를 스타일링 */

• 자식 선택자 결합 : 해당 선택자의 모든 자식이 아닌 그의 바로 밑자식만 선택.
  형태) (선택자) > (선택자) { (내용) }
  (하위 선택자 결합에서 띄어쓰기 부분을 꺽쇠로 대체)

/* 예시(CSS) */
ul > li:last-of-type {
  color:red;
}

<!-- 예시(HTML) -->
  <ul>
    <li>
      list1
      <ol>
        <li>list1</li>
        <li>list2</li>	<!-- not red -->
      </ol>
    </li>
    <li>list2</li>
    <li>list3</li>
    <li>list4</li>	<!-- red -->
  </ul>

자식 선택자 결합으로 ul태그 바로 밑 자식만, ol태그의 자식은 포함되지 않습니다.

• 일반 형제 선택자 결합 : 앞쪽 선택자 요소의 형제 요소 중, 그 아래에 있는 모든 뒤쪽 선택자 요소를 선택.

  형태) (선택자) ~ (선택자) { (내용) }

/* 예시(CSS) */
code ~ p {
  color : peru;
}
	/* <code>의 형제 태그 중 아래에 있는 모든 <p>선택 */

.red ~ div {
  color : lightgray;
}
	/* red클래스 요소의 형제 태그 중 아래에 있는 모든 <div>선택 */

<!-- 예시(HTML) -->
<div>
    <p>P</p>
    <span>Span</span>
    <code>Code</code>
    <p>P2</p>			<!-- peru색 -->
    <div>Div</div>
    <p>P3</p>			<!-- peru색 -->
    <p class="red">P4</p>			<!-- peru색 -->
 	<div>Div</div>				<!-- lightgray색 -->
  	<div>Div</div>
  	<div>Div</div>
</div>

• 인접 형제 선택자 결합 : 앞에서 지정한 요소의 바로 다음에 위치하는 형제요소만 선택
  형태) (선택자) + (선택자) { (내용) }
  용도) 부모를 가지고 선택하는게 아니라 어떤 요소가 특정요소 뒤에 있을때.

  /* 예시(CSS) */
  code + p {
    background-color : blue;
  }
  	/* <code>에 인접한 <p>선택 */
    
  .red + div {
    background-color : pink;
  }
  	/* red클래스 요소에 인접한 <div>선택 */

  <!-- 예시(HTML) -->
  <div>
      <p>P</p>
      <span>Span</span>
      <code>Code</code>
      <p>P2</p>		<!-- blue -->
      <div>Div</div>
      <p>P3</p>
      <p class="red">P4</p>
   	<div>Div</div>		<!-- pink -->
    	<div>Div</div>
    	<div>Div</div>
  </div>

• 그룹화 : 콤마(,)를 사용하여 선택자를 다중 선택.

  /* 예시(CSS) */
  p, span, code {
    color:purple;
  }
  	/* p, span, code 태그를 모두 선택 */

[범용 선택자]

범용 선택자(Universal Selector) : 전체 요소를 선택할 때 사용.
형태) * { }
주의) 모든 요소에 적용되므로 '*'만 사용시 맨 윗줄에 작성할 것.

/* 예시(CSS) */
* {
  color:red;
}

<!-- 예시(HTML) -->
<div>
    <p>P</p>
    <span>Span</span>
    <code>Code</code>
    <p>P2</p>
    <div>Div</div>
</div>
<!-- 모든 글자가 붉은 글씨로 적용 -->

추가정보) .(선택자) = *.(선택자) (ID선택자도 동일)
원래는 클래스 선택자 앞에 '*'을 붙이는 것이 정석이지만, 업데이트 되면서 '*'생략 가능.
p.(선택자) { }의 경우에는 클래스값이 일치하는 모든 p태그 요소를 선택한다는 의미.