자손 선택자
Coddy의 CSS 선택자 코스 레슨 — 15개 중 8번째.
이전 주제에서 우리는 요소의 직계 자식만을 대상으로 하는 자식 결합자(child combinator)에 대해 배웠습니다. 이제 공백으로 표시되는 하위 선택자(descendant selectors)에 대해 알아보겠습니다. 하위 선택자를 사용하면 직계 자식뿐만 아니라 다른 요소 내부에 어느 수준으로든 중첩된 요소를 대상으로 지정할 수 있습니다.
구문
selector1 selector2 {
/* property declarations */
}예를 들어,
<html>
<head>
<title>Combinator</title>
<style>
div p {
color: red;
font-size: 2em;
}
</style>
</head>
<body>
<div>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
</div>
</body>
</html>위의 CSS 규칙은 두 단락 모두를 빨간색으로 스타일링하고 글꼴 크기를 2em으로 설정합니다.
자식 선택자와는 어떤 관계가 있나요?
하위 선택자는 자식 선택자보다 더 일반적입니다. 즉, 하위 선택자는 지정된 요소의 하위 요소인 모든 요소와 일치하는 반면, 자식 선택자는 지정된 요소의 직계 하위 요소인 요소와만 일치합니다.
예를 들어, div p 선택자는 다른 p 요소 내에 중첩된 p 요소를 포함하여 div 요소의 하위 요소인 모든 p 요소와 일치합니다. 반면 div > p 선택자는 div 요소의 직계 자식인 p 요소와만 일치합니다.
챌린지
쉬움이전 연습 문제를 바탕으로 동일한 HTML 구조를 사용해 봅시다. 중첩 수준에 관계없이 .list 요소 내의 모든 단락에 스타일을 지정하기 위해 하위 선택자(descendant selector)를 사용하는 CSS 규칙을 작성하세요. 원하는 대로 새로운 색상, 크기 및 글꼴을 지정하세요.
직접 해보기
<html>
<head>
<title>Descendant Selector Exercise</title>
<style>
/* CSS Code goes here */
</style>
</head>
<body>
<div>
<p>This paragraph is not inside a list</p>
<ul class="list">
<li>
<p>This is a paragraph inside a list item.</p>
</li>
<li>
<div>
<p>This is a paragraph inside a nested div within a list item.</p>
</div>
</li>
</ul>
</div>
</body>
</html>