CSS 선택자
선택자 종류 |
선택자 형태 |
선택자 예 |
전체 선택자 |
* |
* |
태그 선택자 |
태그 |
h1 |
아이디 선택자 |
#id |
#header |
클래스 선택자 |
.class |
.item |
후손 선택자 |
선택자 선택자 |
header h1 |
자식 선택자 |
선택자 > 선택자 |
header > h1 |
속성 선택자 |
선택자[속성=값] |
input[type=text] |
선택자[속성~=값] |
div[data-role~=row] |
|
선택자[속성|=값] |
div[data-role|=row] |
|
선택자[속성^=값] |
div[data-role^=row] |
|
선택자[속성$=값] |
div[data-role$=row] |
|
선택자[속성*=값] |
div[data-role*=row] |
|
동위 선택자 |
선택자 +선택자 |
h1+div |
선택자 ~ 선택자 |
h1 ~ div |
|
구조 선택자 |
선택자:first-child |
li:first-child |
선택자:last-child |
li:last-child |
|
선택자:nth-child(수열) |
li:nth-child(2n+1) |
|
선택자:nth-last-child(수열) |
li:nth-last-child(2n+1) |
|
선택자:first-of-type |
h1:first-of-type |
|
선택자:last-of-type |
h1:last-of-type |
|
선택자:nth-of-type(수열) |
h1:nth-of-type(2n+1) |
|
선택자:nth-last-of-type(수열) |
h1:nth-last-of-type(2n+1) |
|
반응 선택자 |
선택자:active |
div:active |
선택자:hover |
div:hover |
|
상태 선택자 |
:checked |
input:checked |
:focus |
input:focus |
|
:enabled |
input:enabled |
|
:disabled |
input:disabled |
|
링크 선택자 |
:link |
a:link |
:visited |
a:visited |
|
문자 선택자 |
::first-letter |
p::first-letter |
::first-line |
p::first-line |
|
::after |
p::after |
|
::before |
p::before |
|
::selection |
p::selection |
|
부정 선택자 |
선택자:not(선택자) |
li:not(.item) |
1. 후손 선택자 예제
<!DOCTYPE html>
<html>
<head>
<title>CSS3 Selector Basic</title>
<style>
/* id 속성으로 header를 가지는 태그의
후손 위치에 있는 h1 태그의
color 속성을 red 키워드로 적용합니다.*/
#header h1 { color: red; }
/* id 속성으로 section을 가지는 태그의
후손 위치에 있는 h1 태그의
color 속성을 orange 키워드로 적용합니다.*/
#section h1 { color: orange; }
</style>
</head>
<body>
<div id="header">
<h1 class="title">Lorem ipsum</h1>
<div id="nav">
<h1>Navigation</h1>
</div>
</div>
<div id="section">
<h1 class="title">Lorem ipsum</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
</body>
</html>
※ 후손 선택자 주의사항
#header h1, h2 { color: red; }
--> id 속성이 header인 태그의 후손 위치에 있는 h1 태그와 h2 태그의 color 속성을 red로 적용한다.
#header h1, #header h2 { color: red; }
--> id 속성이 header인 태그의 후손 위치에 있는 h1 태그와 id 속성이 header인 태그의 후손 위치에 있는 h2 태그의 color 속성을 red로 적용한다.
3. 동위 선택자 예제
<!DOCTYPE html>
<html>
<head>
<title>CSS3 Selector Basic</title>
<style>
/* h1 태그의 바로 뒤에 위치하는 h2 태그의
color 속성에 red 키워드를 적용합니다. h1 바로 뒤의 태그 1개만*/
h1 + h2 { color: red; }
/* h1 태그의 뒤에 위치하는 h2 태그의
background-color 속성에 orange 키워드를 적용합니다. h1 뒤의 모든 h2태그*/
h1 ~ h2 { background-color: orange; }
</style>
</head>
<body>
<h1>Header - 1</h1>
<h2>Header - 2</h2>
<h2>Header - 2</h2>
<h2>Header - 2</h2>
<h2>Header - 2</h2>
</body>
</html>
4. 반응 선택자 예제
<!DOCTYPE html>
<html>
<head>
<title>CSS3 Selector Basic</title>
<style>
/* h1 태그에 마우스를 올릴 경우에
color 속성에 red 키워드를 적용합니다. */
h1:hover { color: red; }
/* h1 태그를 마우스로 클릭할 때에
color 속성에 blue 키워드를 적용합니다. */
h1:active { color: blue; }
</style>
</head>
<body>
<h1>User Action Selector</h1>
</body>
</html>
5. 상태 선택자 예제
<!DOCTYPE html>
<html>
<head>
<title>CSS3 Selector Basic</title>
<style>
/* input 태그가 사용 가능할 경우에
background-color 속성에 white 키워드를 적용합니다. */
input:enabled { background-color: white; }
/* input 태그가 사용 불가능할 경우에
background-color 속성에 white 키워드를 적용합니다. */
input:disabled { background-color: gray; }
/* input 태그에 체크박스나 라디오 버튼에 체크되었을 경우에
background-color 속성에 white 키워드를 적용합니다. */
input:checked { background-color: orange; }
/* input 태그에 초점이 맞추어진 경우에
background-color 속성에 white 키워드를 적용합니다. */
input:focus { background-color: orange; }
</style>
</head>
<body>
<h2>Enabled</h2>
<input />
<h2>Disabled</h2>
<input disabled="disabled"/>
</body>
</html>
cf.) 상태 선택자와 동위 선택자의 복합 활용
<!DOCTYPE html>
<html>
<head>
<title>CSS3 Selector Basic</title>
<style>
/* input 태그의 type 속성이 checkbox인 태그가 체크되었을 때,
바로 뒤에 위치하는 div 태그의 height 속성을 0픽셀로 적용합니다. */
input[type=checkbox]:checked + div {
height: 0px;
}
div {
overflow: hidden;
width: 650px; height: 300px;
/* 변환 효과를 적용합니다. */
-ms-transition-duration: 1s;
-webkit-transition-duration: 1s;
-moz-transition-duration: 1s;
-o-transition-duration: 1s;
transition-duration: 1s;
}
</style>
</head>
<body>
<input type="checkbox" />
<div>
<h1>Lorem ipsum</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
</body>
</html>
6. 문자 선택자
(1) 시작 문자 선택자
1) ::first-letter: 첫 번째 글자를 선택한다.
2) ::first-line: 첫 번째 줄을 선택한다.
<!DOCTYPE html>
<html>
<head>
<title>CSS3 Selector Basic Page</title>
<style>
p::first-letter { font-size: 3em; }
p::first-line { color: red; }
</style>
</head>
<body>
<h1>Lorem ipsum dolor sit amet</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<p>Aenean ac erat et massa vehicula laoreet consequat et sem.</p>
</body>
</html>
(2) 전후 문자 선택자
1) ::after: 태그 뒤에 위치하는 공간을 선택한다.
2) ::before: 태그 앞에 위치하는 공간을 선택한다.
<!DOCTYPE html>
<html>
<head>
<title>CSS3 Selector Basic Page</title>
<style>
p { counter-increment: rint; }
p::before { content: counter(rint) "."; }
p::after { content: " - " attr(data-page) " page"; }
p::first-letter { font-size: 3em; }
</style>
</head>
<body>
<h1>Lorem ipsum dolor sit amet</h1>
<p data-page="52">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<p data-page="273">Aenean ac erat et massa vehicula laoreet consequat et sem.</p>
</body>
</html>
