[CSS] Descendant Combinator

안녕하세요 동기 여러분! 오늘은 자손 결합자(Descendant Combinator)에 대해 알아봅시다!

 

Descendant Combinator

자손 결합자(Descendant Combinator)는 저번시간에 배운 체이닝(chaining)의 반대 개념입니다.

 

체이닝에서는 CSS 코드에서 HTML 요소를 먼저 가져오고 클래스명을 쓰는 방식이었습니다.

/* 예 */
h2.classname {
 color: red; 
}

 

자손 결합자(Descendant Combinator)는 이렇습니다.

/* 예 */
.classname h2 {
  color: red;
}

 

---

 

예시1

<!-- HTML 코드 -->
<div class='red'>
  <h2>빨간색 글씨 파워~~~</h2>
  <h3>검정색 글씨 파워~~~</h3>
</div>

/* CSS 코드 */
.red h2 {
  color: red;
}

이 둘을 적용하면 아래와 같은 화면이 나옵니다.

 

---

 

<!-- HTML 코드 -->
<div class='firstlist'>
  <ul>
    <li class='red'>리신</li>
    <li>카직스</li>
    <li>헤카림</li>
  </ul>
</div>

/* CSS 코드 */
.firstlist ul li.red {
  color: red;
}

이 둘을 적용하면 아래와 같은 화면이 나옵니다.

 

다만 위의 CSS 코드에서 ul 또는 li 하나만 입력해도 적용이 됩니다.

 

---

 

오늘의 느낌

...