[CSS] 범위와 지정에 대한 선택자(전체 선택자, 요소 선택자, 자손 선택자, 자식 선택자, 인접 선택자)
안녕하세요. 명월입니다.
이 글은 CSS에서 범위와 지정에 대한 선택자(전체 선택자, 요소 선택자, 자손 선택자, 자식 선택자, 인접 선택자)에 대한 설명입니다.
지난 글에서 속성과 id, class를 통해 요소를 선택하는 속성 선택자에 대해 설명했습니다.
링크 - [CSS] 속성 선택자
이번에는 그 선택된 속성을 기준으로 인접된 요소나 파생(하위) 요소들을 선택하는 방법입니다.
먼저 style에서 별 표시(*)는 모든 요소를 선택하는 방법입니다. 모든 요소는 보통 font-style 정도나 기본 padding이나 margin 설정을 할 때 사용하기는 하는데 많이 사용되는 선택자는 아닙니다.
그리고 style 설정에 태그 혹은 id나 class, 속성을 선택합니다만, 콤마(,)를 사용하면 복수로 선택이 가능합니다.
예를 들면 「p, div」라고 하면 p태그와 div 태그를 가르키는 것입니다.
그리고 자손과 자식은 자손은 선택된 요소 안의 지정된 모든 파생 태그를 말하는 것이고 자식 선택은 요소 안의 바로 아래의 파생 요소를 이야기하는 것입니다.
<a>
<b>
<d></d>
</b>
<c>
<e></e>
</c>
<f></f>
</a>
위와 같은 구조로 html이 작성되어 있다고 하면 a태그의 자손은 b, c, d, e 태그가 되는 것이고 자식 태그는 b와 c를 가르키는 것입니다.
즉, 「a d」처럼 a선택 요소와 d의 선택 요소에 공백(스페이스)를 두면 a 태그 자손의 d 태그를 가르키는 것이고 「a > d」는 a 태그의 자식 태그 d를 가르키는 것인데 a 태그의 자식 태그로는 d가 없기 때문에 아무것도 가르키지 않습니다.
「a > b > d」가 되어야 d태그를 가르키겠네요.
인접 선택자로서 「+」를 사용하게 되면 바로 뒤(파생(하위)가 아님)에 배치된 요소 즉 「b + c」를 하게 되면 c를 가르키지만 「b + f」는 b태그 바로 뒤에 배치되어 있지 않기 때문에 아무것도 가르키지 않습니다.
「~」는 「+」처럼 파생(하위)나 상위가 아닌 같은 레벨의 뒤에 배치된 모든 요소를 선택하는 것입니다.
<!DOCTYPE html>
<html>
<head>
<title>title</title>
</head>
<body>
<div id="test">
<!-- 첫번째 요소 -->
<div class="p1"><h1>p1</h1></div>
<!-- 두번째 요소 -->
<div class="p2"><h2>p2</h2></div>
<!-- 세번째 요소 -->
<div class="p3"><h1>p3</h1></div>
<!-- 네번째 요소 -->
<div class="p4"><h2>p4</h2></div>
</div>
</body>
</html>
/* id가 test인 div태그의 h1의 자손 태그*/
div#test h1 {
color: red;
}
/* id가 test인 div태그의 클래스가 p2인 자식 태그의 h2의 자식 태그*/
div#test > .p2 > h2 {
color: blue;
}
/* 클래스가 p2과 p4인 요소*/
.p2, .p4 {
border: 1px solid #000;
}
/* 클래스가 p1 요소의 다음으로 있는 div태그의 요소*/
.p1 ~ div {
background: yellow;
}
/* 클래스가 p1 요소의 바로 다음으로 있는 div태그의 요소*/
.p1 + div{
background: red;
}
위 예제를 보면 첫번째는 자손 태그를 가르키니 .p1의 h1과 .p3의 h1를 가르킵니다. 그러나 .p2의 h2의 경우는 .p2의 클래스의 자식이기 때문에 .p4의 h2는 해당 사항이 아닙니다.
~를 사용하고 +를 사용하였기 때문에 먼저 클래스가 .p1 태그의 다음 div태그의 배경색을 노란색으로 설정한 후 p1의 바로 다음 div태그의 배경색을 빨간색으로 설정한 것입니다.
여기까지 CSS에서 범위와 지정에 대한 선택자(전체 선택자, 요소 선택자, 자손 선택자, 자식 선택자, 인접 선택자)에 대한 설명이었습니다.
궁금한 점이나 잘못된 점이 있으면 댓글 부탁드립니다.
'Study > Javascript, Jquery, CSS' 카테고리의 다른 글
| [CSS] 의사요소 - fist-line, first-letter, before, after (2) | 2020.01.22 |
|---|---|
| [CSS] 의사클래스 - only-child, only-of-type, empty, empty, root (0) | 2020.01.21 |
| [CSS] 의사클래스 - first-child, last-child, first-of-type, last-of-type (0) | 2020.01.16 |
| [CSS] 의사클래스 - nth-child, nth-of-type, nth-last-child, nth-last-of-type (2) | 2020.01.15 |
| [CSS] 속성 선택자 (0) | 2020.01.15 |
| [CSS] Selector(선택자) (0) | 2020.01.13 |
| [CSS] CSS Styles이란? (0) | 2020.01.12 |
| [HTML] Open graph (오픈 그래피, og 태그) (0) | 2020.01.12 |