[CSS] CSS의 관계 선택자(Combinator Selectors)

728x90

CSS는 선택자(ex. h1, .class 등)를 잡아 HTML 요소에 스타일을 준다.

CSS가 선택자를 잡는 기준은 5가지로 나눌 수 있다.

Simple Selectors(요소의 name,id,class를 기준으로 선택 - 일반적인 방법)
Combinator Selectors(요소 간의 관계를 기준으로 선택)
Pseudo-class Selectors(요소의 특정 상태를 기준으로 선택)
Pseudo-elements Selectors(요소의 특정 부분을 선택)
Attribute Selectors(요소가 가진 속성이나 속성의 값으로 선택)

이번 글에서는 Combinator Selectors에 대해서 알아보겠습니다.

Combinator Selectors(요소 간의 관계를 기준으로 선택)

combinator Selectors는 기본선택자 사이에 위치, 기본선택자를 조합하여 특정 요소를 선택한다.

Combinator Selectors는 4가지 선택자를 가진다.

자손 선택자(Descendant Selectors) - 기준 선택자의 자손 요소들을 선택 (띄어쓰기)
자식 선택자(Child Selectors) - 기준 선택자의 자식(바로 아래 자손) 요소를 선택 ( > )
근접 형제 선택자(Adjacent Sibling Selectors) - 기준 선택자의 가장 가까운 형제 요소를 선택 ( + )
형제 선택자(General Sibling Selectors) - 기준 선택자의 형제 요소들을 선택 ( ~ )

예시))

1) 자손 선택자 - 기본 선택자 사이에 띄어쓰기(space)

/* ul 아래 모든 li 요소를 선택 */
ul li {
	color : red;
}

2) 자식 선택자 - 기본 선택자 사이에 ' > '

/* ul 아래 자식 li 요소만 선택 */
ul > li {
	color : red;
}

자손(descendant) vs 자식(child)

- 기준 요소 한단계 아래 있으며 자식 몇단계든 아래 있으면 자손

/* 첫번째 세번째 li만 자식 두번째li는 자손
<ul>
    <li>첫번째<li>
    <span><li>두번째</li></span>
    <li>세번째</li>
</ul>

3) 근접 형제 선택자 - 기본 선택자 사이에 ' + '

/* ul요소의 형제 중 가장 가까운 span 요소 선택 */
ul + span{
	color : red;
}

4) 형제 선택자 - 기본 선택자 사이에 ' ~ '

/* ul요소의 형제 중 span 요소 선택 */
ul + span{
	color : red;
}

형제 요소란? - 같은 부모를 가지며 같은 단계에 있는 요소(한 부모의 'child'들이라고 생각하면 된다)

<body>
<ul>
    <li>첫번째</li>
    <li>두번째</li>
</ul>

<span>ul의 형제1</span>
<span>ul의 형제2</span>
<div><span>ul의 형제가 아님</span></div> /* 이 span은 ul의 형제가 아님 */

다음과 같은 요소들이 있을 때

ul + span {} 을 하면 가장 가까운 span(ul의 형제1)만 선택되며

ul ~ span {} 을 하면 형제 span들이 선택된다(ul의 형제1 , ul의 형제2)

참고 - "Learn CSS" W3School (https://www.w3schools.com)

저작자표시

'지식IT' 카테고리의 다른 글

[CSS] CSS의 가상 요소 선택자(Pseudo-element Selectors) (0)	2020.02.02
[CSS] CSS의 가상 선택자(Pseudo-class Selectors) (0)	2020.01.29
[CSS] CSS의 기본 선택자(Simple Selectors) (0)	2020.01.27
[CSS] CSS(Cascading Style Sheet) 개요 및 문법 (0)	2020.01.24
[jQuery] toggle() - 화면에서 요소를 보였다가 안 보였다가를 반복하는 메소드 (0)	2020.01.23