CSS에서 자손 선택자와 클래스의 복잡한 조합

이제 다음과 같은 코드가 있다고 가정해 보겠습니다:

html<div class="block">
  <h2 class="header">Title h2</h2>
  <p>
    text
  </p>
  
  <h3 class="header">Title h3</h3>
  <p>
    text
  </p>
  <p>
    text
  </p>
</div>
<div class="block">
  <h2 class="header">Title h2</h2>
  <p>
    text
  </p>
  
  <h3 class="header">Title h3</h3>
  <p>
    text
  </p>
  <p>
    text
  </p>
</div>

block 클래스를 가진 요소 내부에 있는 header 클래스를 가진 모든 요소를 찾고, Arial 글꼴을 설정해 보겠습니다:

css.block .header {
  font-family: Arial;
}

HTML 코드에서 볼 수 있듯이, block 클래스를 가진 요소 내부의 header 클래스를 가진 요소는 h2 제목일 수도 있고 h3 제목일 수도 있습니다. 이러한 제목들을 구분하는 선택자를 작성하고, 이 제목들에 대해 무언가를 해보겠습니다.

block 클래스를 가진 요소 내부에 있는 header 클래스를 가진 모든 h2를 선택해 보겠습니다:

css.block h2.header {
  font-size: 30px;
  color: red;
}

이제 block 클래스를 가진 요소 내부에 있는 header 클래스를 가진 모든 h3를 선택해 보겠습니다:

css.block h3.header {
  font-size: 20px;
  color: green;
}

모든 CSS를 한데 모아보겠습니다:

css.block .header {
  font-family: Arial;
}
.block h2.header {
  font-size: 30px;
  color: red;
}
.block h3.header {
  font-size: 20px;
  color: green;
}

이 CSS를 우리의 HTML 코드에 적용해 보겠습니다:

css.eee .bbb {
  color: red;
}

css.eee h2 {
  color: red;
}

css.eee h2.bbb {
  color: red;
}

css.eee h3.bbb {
  color: red;
}

css.eee p.bbb {
  color: red;
}

css.eee .bbb .kkk {
  color: red;
}