우선 '연결 선택자'라는 단어의 정의를 오해하지 않도록 설명하겠습니다. 여기서 '연결'되는 것은, 선택자가 두 개 이상 사용되어 조합하게 된다는 것을 의미합니다. 그래서 연결 선택자는 곧 조합, 또는 콤비네이션 선택자로도 불립니다.
이러한 연결 선택자에는 다양한 유형이 있습니다. 필요성에 따라 하위 / 자식 / 형제 선택자를 사용하게 됩니다. 각각의 종류와 특성에 대해서 하나씩 살펴보겠습니다.
○ 하위 선택자(descendant selector)
하위 선택자를 사용하게 되면, <상위요소> <하위요소>를 작성하게 됩니다. 이때 이 선택자의 정의는, '상위요소에 포함된 모든 하위요소에 적용한다.'입니다. 특히 자식 요소 뿐만아니라 손자 요소까지 모두 일괄적으로 적용됩니다.
section p {
// ....
}
위와 같이 section과 p를 작성하면 section이 상위요소, p가 하위 요소가 됩니다. 아래의 예제를 보겠습니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>example</title>
<style>
body {
background-color:#eee;
}
section {
width:800px;
margin:20px auto;
}
p {
width:600px;
padding:20px;
background-color:#fff;
border:1px solid #d27474;
line-height:2;
}
section p {
color:red;
}
</style>
</head>
<body>
<section>
<h1>결제 방법</h1>
<p>상품이 품절되었습니다. <br>고객센터로 문의하세요.</p>
<div>
<p>한정판 패키지 : 200,000원</p>
<p>일반판 : 70,000원</p>
</section>
</body>
</html>
스타일에서 section p에 색상을 red로 적용하였습니다. 이때 하위 선택자로 적용되었기 때문에, <section> 태그의 자식 요소인 <p>의 "상품이 품절..."요소에도 적용되었고, 손자 요소인 <p>에도 모두 적용된 것을 확인할 수 있습니다.
○ 자식 선택자(child selector)
위 하위 선택자는 하위 요소를 지정하면, 손자까지도 일괄적으로 모두 적용되는 선택자라고 했습니다. 만일 여기서 자식 선택자를 사용하게 되면, 정확히 상위 요소의 자식 요소까지만 해당 요소 값이 적용됩니다. 상위 요소 다음에 ' > '를 넣어 하위 요소를 작성해 주면 됩니다.
즉, 바로 한 단계 아래에만 적용되는 연결 선택자입니다. 아래 기본형과 하위 선택자 예제를 그대로 응용해 적용해 보도록 하겠습니다.
section > p {
// ...
}
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>example</title>
<style>
body {
background-color:#eee;
}
section {
width:800px;
margin:20px auto;
}
p {
width:600px;
padding:20px;
background-color:#fff;
border:1px solid #d27474;
line-height:2;
}
section > p {
color:red;
}
</style>
</head>
<body>
<section>
<h1>결제 방법</h1>
<p>상품이 품절되었습니다. <br>고객센터로 문의하세요.</p>
<div>
<p>한정판 패키지 : 200,000원</p>
<p>일반판 : 70,000원</p>
</section>
</body>
</html>
기존 예시에서 section > p, 즉 자식 선택자로 변경되었습니다. 이로 인하여 <section>의 자식 요소인 <p>("상품이 품절...")의 경우 글자 색상이 적용되었지만, 이번에는 <div> 하위의 <p> 요소에는 색상이 적용되지 않았습니다. <section>의 자식 요소가 아닌 손자 요소이기 때문이죠.
'Programming > HTML+CSS' 카테고리의 다른 글
| [CSS] 6. 고급 선택자(2) - 속성 선택자 1 (0) | 2023.05.30 |
|---|---|
| [CSS] 6. 고급 선택자(1) - 연결 선택자 2 (0) | 2023.05.24 |
| [CSS] 5. 배경 이미지와 그라데이션(3) - 그라데이션 효과3 (0) | 2023.05.16 |
| [CSS] 5. 배경 이미지와 그라데이션(3) - 그라데이션 효과2 (0) | 2023.05.15 |
| [CSS] 5. 배경 이미지와 그라데이션(3) - 그라데이션 효과1 (0) | 2023.05.13 |
