WEB/CSS

[CSS] CSS Combinators Selector(선택자) (자식 형제 선택자 종류)

2021-03-23

Combinators 선택자들은 각 선택자들의 관계를 설명하며, 특정한 부호로 이들과의 관계를 규정하며 표현할 수 있다.

- descendant selector( " " )

descendant 한국어로 번역하면 자손이라는 의미를 가지고 있다. 때문에 [ 부모선택자 자손 선택자 ]라고 지정 시 해당 부모의 모든 자손이 선택된다. (space 키 즉 하나의 빈공 백문자가 기호로 사용된다.)

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>

<style type="text/css">

#outset li{
	color : red;
}

</style>

</head>

<body>
<div id="outset"><!-- 모두를 감싸는 시초태그  -->
<ol><!--outset의 자손들  -->
	<li>AAA</li>
	<li>BBB
		<ul><!-- BBB의 새로운 자식  -->
			<li>BBB-1</li>
			<li>BBB-2</li>
			<li>BBB-3</li>
		</ul>	
	</li>
	<li>CCC</li>
	<li>DDD</li>
</ol>
</div>

</body>
</html>

위의 예제는 가장 상위 부모태그 outset을 기준으로 하위에 있는 li 태그를 선택하였다. 그 결과 outset이 감싸고 있는 모든 li 태그들이 영향을 받는 것을 확인할 수 있다.

- child selector( " > " )

child 번역시 자식이라는 의미를 가지고 있다. 때문에 부모태그의 직속 자식 태그들만 영향을 받는다.

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>

<style type="text/css">

#outset>li{
	color : red;
}

</style>

</head>

<body>
<div id="outset"><!-- 모두를 감싸는 시초태그  -->
<ol><!--outset의 자손들  -->
	<li>AAA</li>
	<li>BBB
		<ul><!-- BBB의 새로운 자식  -->
			<li>BBB-1</li>
			<li>BBB-2</li>
			<li>BBB-3</li>
		</ul>	
	</li>
	<li>CCC</li>
	<li>DDD</li>
</ol>
</div>

</body>
</html>

때문에 #outset>li 라고 입력 시 어떠한 태그도 영향을 받지 않게 된다. 그 이유는 #outset의 자식은 ol이다. 여기서의 li굳이 표현한다면 #outset의 손자태그가 되기 때문에 해당 코드는 아래와 같이 color 변경 없이 나타난다.

- adjacent sibling selector ( " + " )

adjacent sibling 번역시 인접한 형제라는 의미를 가지고 있으며, + 부호로 표현된다. 아래의 예제를 보자.

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>

<style type="text/css">

#A + li {
	color : red;
}

</style>

</head>

<body>
<div id="outset"><!-- 모두를 감싸는 시초태그  -->
<ol><!--outset의 자손들  -->
	<li id="A">AAA</li>
	<li>BBB
		<ul><!-- BBB의 새로운 자식  -->
			<li>BBB-1</li>
			<li>BBB-2</li>
			<li>BBB-3</li>
		</ul>	
	</li>
	<li>CCC</li>
	<li>DDD</li>
</ol>
</div>

</body>
</html>

이번에는 AAA에 id를 부여하고 해당 태그의 인접한 형제를 찾아보도록 하자. 결과를 확인해보면 바로 아래의 태그인 BBB와 BBB가 품고 있는 자손 태그들이 선택된 것을 확인할 수 있다. 다만 CCC와 DDD는 형제태그임에도 불구하고 인접하지 않아 선택되지 않는 것을 확인할 수 있다.

- general sibling selector( " ~ " )

general sibling 을 번역하면 일반적인 형제다. 형제라는 개념은 자신과 동등한 위치에 있는 태그들을 뜻한다. 즉 선택한 태그와 같은 레벨에 있는 선택자들이 선택된다. 아래의 예제를 보자.

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>

<style type="text/css">

#b1 ~ li {
	color : red;
}

</style>

</head>

<body>
<div id="outset"><!-- 모두를 감싸는 시초태그  -->
<ol><!--outset의 자손들  -->
	<li id="A">AAA</li>
	<li>BBB
		<ul><!-- BBB의 새로운 자식  -->
			<li id="b1">BBB-1</li>
			<li>BBB-2</li>
			<li>BBB-3</li>
		</ul>	
	</li>
	<li>CCC</li>
	<li>DDD</li>
</ol>
</div>

</body>
</html>

이번에는 BBB의 자손인 BBB-1의 모든 형제들을 찾아보도록 하자. BBB-1에 id를 b1으로 부여하고 이후 b1과 형제관계에 있는 li 태그들을 모두 찾는 것이다. 결과를 확인해보면 인접한 태그 BBB-2 뿐 아니라 인접하지 않은 BBB-3까지 선택됨으로써 모든 형제들이 지정된 것을 확인할 수 있다.

저작자표시 비영리

'WEB > CSS' 카테고리의 다른 글

[CSS] CSS padding을 통한 내부 여백 부여하기 (0)	2021.03.27
[CSS] CSS margin 속성을 통한 외부의 여백 / 가운데 정렬 방법 (0)	2021.03.26
[CSS] CSS top: 50% 와 bottom: 50% 의 차이점 알아보기. (0)	2021.03.18
[CSS] CSS bottom 속성을 이용한 수직 위치 변경 방법 알아보기. (0)	2021.03.17
[CSS] CSS Top 속성을 이용한 수직 위치 변경 방법 알아보기. (0)	2021.03.16

Contents

새소식

인기 검색어