CSS에서 자손 선택자와 클래스의 복잡한 조합
이제 다음과 같은 코드가 있다고 가정해 보겠습니다:
<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 글꼴을 설정해 보겠습니다:
.block .header {
font-family: Arial;
}
HTML 코드에서 볼 수 있듯이, block 클래스를 가진
요소 내부의 header 클래스를 가진 요소는
h2 제목일 수도 있고 h3 제목일 수도 있습니다.
이러한 제목들을 구분하는 선택자를 작성하고,
이 제목들에 대해 무언가를 해보겠습니다.
block 클래스를 가진 요소 내부에 있는
header 클래스를 가진 모든 h2를 선택해 보겠습니다:
.block h2.header {
font-size: 30px;
color: red;
}
이제 block 클래스를 가진 요소 내부에 있는
header 클래스를 가진 모든 h3를 선택해 보겠습니다:
.block h3.header {
font-size: 20px;
color: green;
}
모든 CSS를 한데 모아보겠습니다:
.block .header {
font-family: Arial;
}
.block h2.header {
font-size: 30px;
color: red;
}
.block h3.header {
font-size: 20px;
color: green;
}
이 CSS를 우리의 HTML 코드에 적용해 보겠습니다:
아래 코드에서 선택자가 무엇을 선택하는지 설명하세요. 그런 다음 이 선택자에 맞는 HTML 코드를 작성하세요. 선택자가 있는 코드는 다음과 같습니다:
.eee .bbb {
color: red;
}
아래 코드에서 선택자가 무엇을 선택하는지 설명하세요. 그런 다음 이 선택자에 맞는 HTML 코드를 작성하세요. 선택자가 있는 코드는 다음과 같습니다:
.eee h2 {
color: red;
}
아래 코드에서 선택자가 무엇을 선택하는지 설명하세요. 그런 다음 이 선택자에 맞는 HTML 코드를 작성하세요. 선택자가 있는 코드는 다음과 같습니다:
.eee h2.bbb {
color: red;
}
아래 코드에서 선택자가 무엇을 선택하는지 설명하세요. 그런 다음 이 선택자에 맞는 HTML 코드를 작성하세요. 선택자가 있는 코드는 다음과 같습니다:
.eee h3.bbb {
color: red;
}
아래 코드에서 선택자가 무엇을 선택하는지 설명하세요. 그런 다음 이 선택자에 맞는 HTML 코드를 작성하세요. 선택자가 있는 코드는 다음과 같습니다:
.eee p.bbb {
color: red;
}
아래 코드에서 선택자가 무엇을 선택하는지 설명하세요. 그런 다음 이 선택자에 맞는 HTML 코드를 작성하세요. 선택자가 있는 코드는 다음과 같습니다:
.eee .bbb .kkk {
color: red;
}
