고급 선택자

연결 선택자(Combination Selector)

공백, >, +, ~ 등 결합자(combinator)를 이용해 특정 요소를 선택

후손 결합자(Descendant Combinator)
- 공백 문자를 이용해 선택자를 조합
- 부모 요소의 영역하에 있는 특정 선택자에 스타일을 적용

<!DOCTYPE html>
<html lang="ko">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
	<style>
		header span {
			color: blue;
		}
	</style>
</head>
<body>
	<header>
		<h1>header -> h1</h1>
		<span>header -> span</span>
		<br>
		<div>
			<span>header -> div -> span</span>
		</div>
	</header>
	<span>span</span>
</body>
</html>

Untitled

자식 결합자(Child Combinator)
- 기호를 이용해 선택자를 조합
- 부모 요소 영역에서 선택 범위를 자식 요소로 한정해서 스타일을 적용

<!DOCTYPE html>
<html lang="ko">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
	<style>
		header > span {
			color: blue;
		}
	</style>
</head>
<body>
	<header>
		<h1>header -> h1</h1>
		<span>header -> span</span>
		<br>
		<div>
			<span>header -> div -> span</span>
		</div>
	</header>
	<span>span</span>
</body>
</html>

Untitled

인접 형제 결합자(Adjacent Sibling Combinator)
- - 기호를 이용해 선택자를 조합
- 첫번째 선택자 요소 바로 뒤에 나오는 형제 요소에 스타일을 적용

<!DOCTYPE html>
<html lang="ko">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
	<style>
		header + span {
			color: blue;
		}
	</style>
</head>
<body>
	<header>
		<h1>header -> h1</h1>
		<span>header -> span</span>
		<br>
		<div>
			<span>header -> div -> span</span>
		</div>
	</header>
	<span>span1</span>
	<div>
		<span>div -> span2</span>
	</div>
	<span>span3</span>
</body>
</html>

Untitled

일반 형제 결합자(General Sibling Combinator)
- ~ 기호를 이용해 선택자를 조합
- 첫번째 선택자 요소 이후에 나오는 모든 형제 요소에 스타일을 적용

<!DOCTYPE html>
<html lang="ko">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
	<style>
		header ~ span {
			color: blue;
		}
	</style>
</head>
<body>
	<header>
		<h1>header -> h1</h1>
		<span>header -> span</span>
		<br>
		<div>
			<span>header -> div -> span</span>
		</div>
	</header>
	<span>span1</span>
	<div>
		<span>div -> span2</span>
	</div>
	<span>span3</span>
</body>
</html>

Untitled

속성 선택자(Attribute Selector)

HTML 요소의 속성을 이용하여 특정 요소를 선택

[속성명] 특정 속성이 있는 요소 선택

<!DOCTYPE html>
<html lang="ko">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
	<style>
		[target] {
			color: green;
		}
	</style>
</head>
<body>
	<a href="" target="_blank">네이버</a>
	<br>
	<a href="">구글</a>
</body>
</html>

target 속성을 가진 요소만 적용

Untitled

[속성명=속성값] 특정 속성과 속성값이 일치하는 요소 선택

<!DOCTYPE html>
<html lang="ko">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
	<style>
		[target="_self"] {
			color: green;
		}
	</style>
</head>
<body>
	<a href="" target="_blank">네이버</a>
	<br>
	<a href="" target="_self">구글</a>
</body>
</html>

target="_self" 인 요소만 적용

Untitled

[속성명~=속성값] 특정 속성의 설정한 속성값이 포함되어 있는 요소 선택

<!DOCTYPE html>
<html lang="ko">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
	<style>
		[class~=att_class] {
			color: green;
		}
	</style>
</head>
<body>
	<h3 class="att_class">att_class</h3>
	<h3 class="att">att</h3>
	<h3 class="att_class2 att_class">att_class2 att_class</h3>
	<h3 class="att-1">att-1</h3>
</body>
</html>

class 속성의 값이 att_class가 포함된 요소만 적용

Untitled

[속성명 |= 속성값] 속성값이 완전일치 또는 '속성값' + '-'인 요소

<!DOCTYPE html>
<html lang="ko">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
	<style>
		[class~=att_class] {
			color: green;
		}
	</style>
</head>
<body>
	<h3 class="att_class">att_class</h3>
	<h3 class="att">att</h3>
	<h3 class="att_class2 att_class">att_class2 att_class</h3>
	<h3 class="att-1">att-1</h3>
</body>
</html>

class 속성의 값이 att 또는 att- 인 요소만 적용

Untitled