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까지 선택됨으로써 모든 형제들이 지정된 것을 확인할 수 있다.
