자식 선택자
Coddy의 CSS 선택자 코스 레슨 — 15개 중 7번째.
자식 선택자(child selector)는 지정된 요소의 직계 자식인 모든 요소를 선택하는 CSS 선택자의 한 종류입니다. 자식 선택자는 두 선택자 사이에 크다 기호(>)를 사용하여 표시합니다.
예시:
다음과 같은 HTML 구조를 가정해 보겠습니다:
<div class="parent">
<p>This is a direct child paragraph.</p>
<div>
<p>This is an indirect child paragraph.</p>
</div>
</div>직계 자식 단락을 타겟팅하려면 다음과 같이 자식 결합자를 사용합니다:
.parent > p {
color: blue;
}이 예시에서는 내부 <div> 안에 중첩된 단락이 아닌, 직계 자식 단락만 파란색으로 변합니다.
자식 선택자는 지정된 요소의 직계 자식이 아닌 요소에 스타일이 적용되는 것을 방지하기 위해서도 사용될 수 있습니다. 예를 들어, 자식 선택자를 사용하여 p 요소의 직계 자식인 모든 링크를 빨간색으로 스타일링할 수 있습니다.
챌린지
쉬움다음 HTML 구조가 주어졌을 때, <ul> 요소 내부의 직계 리스트 항목의 배경색이 yellow가 되도록 자식 결합자(child combinator)를 사용하여 CSS 규칙을 작성하세요.
직접 해보기
<html>
<head>
<title>Child Selector Exercise</title>
<style>
/* CSS Code goes here */
</style>
</head>
<body>
<ul class="list">
<li>This is a direct list item.</li>
<div>
<li>This is an indirect list item.</li>
</div>
</ul>
</body>
</html>