문서:선택자

분류

프로그래밍

1. 개요2. 종류 및 문법

選擇字 / Selector

1. 개요

CSS로 HTML문서에 스타일을 입힐 요소를 말그대로 선택하는 문자.

선택자 { (스타일 속성): (스타일 값); }

HTML 요소에 스타일을 입히는 대부분의 CSS 코드는 위와 같은 구조로 이루어져 있다. 보다시피 스타일들을 나열한 중괄호의 앞부분에 오는 게 바로 선택자이다.

스크립트 언어에서도 선택자를 사용할 수 있다. jQuery에서는 $('선택자')와 같은 방식으로 HTML 태그를 선택한다. 바닐라 자바스크립트에서는 document.querySelector('선택자')와 document.querySelectorAll('선택자')의 두 가지 방법이 있는데, 전자는 해당 선택자의 기준을 만족하는 요소 중 첫 번째 요소만 반환하고, 후자는 해당 선택자의 기준을 만족하는 모든 요소를 배열 형태로 반환한다.

2. 종류 및 문법

이 문단에서는 혼동을 피하기 위해 '바로 아래' 같은 모호한 표현 대신 특수한 표현을 사용한다.

'부모'/'자식'은 어떤 태그 안에 다른 태그가 있는 관계를 뜻한다. 예를 들어 <p><span></span></p>와 같은 구조에서 <span>은 <p>의 자식이고, <p>는 <span>의 부모이다.
'형제'는 같은 부모를 둔 태그들을 뜻한다. 예를 들어 <p><span></span><img></p>와 같은 구조에서 <span> 바로 다음에 오는 형제는 <img>이다.

*이나 태그 선택자가 맨 앞에 오고, 그 뒤에 button.foo.bar:hover와 같이 여러 종류를 중첩할 수 있고, 태그 없이 다른 선택자만 중첩할 수도 있다. 예시로 든 선택자는 'foo', 'bar' 클래스의 <button> 태그 중 마우스를 올린 요소를 선택한다는 의미이다. p.foo, p.bar, ...와 같은 형태로 여러 선택자를 한꺼번에 선택할 수도 있다.

구조 선택자의 경우 인자로 수열을 받는 선택자가 있는데, an+b/an 형태의 등차수열이나 even(짝수, =2n), odd(홀수, =2n+1)이 올 수 있다. 이때 첫 번째 자식이 1이며, n은 0 이상의 정수이다. -n+3과 같이 써서 처음 3개만 선택할 수도 있다.

전체 선택자

*

모든 요소를 선택한다.
태그 선택자

태그

해당 태그의 요소를 선택한다.
아이디 선택자

#아이디

해당 아이디의 요소를 선택한다.
클래스 선택자

.클래스

해당 클래스의 요소를 선택한다.
후손 선택자

(선택자1) (선택자2)

선택자1의 모든 하위 요소(자식, 자식의 자식, ...) 중 선택자2를 선택한다.
자손 선택자

(선택자1) > (선택자2)

선택자1 바로 밑의 자식 중 선택자2를 선택한다.

속성 선택자

[속성]	태그에 해당 속성이 명시되어 있는 요소를 선택한다.[8]
[속성=문자열]	태그에 해당 속성이 명시되어 있고 그 값이 해당 문자열인 요소를 선택한다.
[속성~=문자열]	해당 속성의 값에 해당 문자열이 완전한 단어로(즉, 앞뒤가 띄어쓰기로 구분되어서) 포함되어 있는 요소를 선택한다.
[속성\|=문자열]	해당 속성의 값이 해당 문자열이거나 그 뒤에 하이픈(-)이 붙는 것으로 시작하는 요소를 선택한다.[10]
[속성*=문자열]	해당 속성의 값에 해당 문자열이 포함되어 있는 요소를 선택한다.[12]
[속성^=문자열]	해당 속성의 값이 해당 문자열로 시작하는 요소를 선택한다.
[속성$=문자열]	해당 속성의 값이 해당 문자열로 끝나는 요소를 선택한다.

동위 선택자

(선택자1) + (선택자2)	선택자1의 형제 중 바로 다음에 오는 선택자2 하나를 선택한다.
(선택자1) ~ (선택자2)	선택자1의 형제 중 자신보다 다음에 오는 모든 선택자2를 선택한다.

가상 클래스(pseudo-class)

구조 선택자

:first-child	형제 중 첫 번째로 오는 요소를 선택한다.
:last-child	형제 중 마지막으로 오는 요소를 선택한다.
:nth-child(수열)	형제 중 (수열) 번째에 있는 요소를 선택한다.
:nth-last-child(수열)	형제 중 뒤에서 (수열) 번째에 있는 요소를 선택한다.
:nth-of-type(수열)	태그별로 형제 중 (수열) 번째에 있는 요소를 선택한다. 태그 이외 다른 선택자에는 반응하지 않는다.

반응 선택자

:active

클릭하고 있는 요소를 선택한다.

:hover

커서가 올라와 있는 요소를 선택한다.

상태 선택자

:checked	체크되어 있는 <input> 체크박스, 라디오 버튼이나 드롭다운 메뉴의 선택되어 있는 선택지(<option>)를 선택한다.
:focus	현재 입력하고 있는, 즉 커서가 깜박이고 있는 <input> 요소를 선택한다.
:enabled	활성화되어 있는, 즉 내용을 수정할 수 있는 <input> 요소를 선택한다.
:disabled	비활성화되어 있는, 즉 내용을 수정할 수 없는 <input> 요소를 선택한다.

링크 선택자

:link

href 속성이 명시된[17] <a> 요소를 선택한다.

:visited

방문했던 링크가 걸린 <a> 요소를 선택한다.
부정 선택자

:not(선택자)

해당 선택자에 해당하지 않는 요소들을 선택한다.

가상 요소[18]

::first-letter	첫 번째 글자를 선택한다. `::before`의 영향을 받는다. 특정한 CSS 속성만 사용할 수 있는 제한이 있다(영어).[20]
::first-line	첫 번째 줄을 선택한다. 특정한 CSS 속성만 사용할 수 있는 제한이 있다(영어).
::before	태그 앞에 위치하는 공간을 선택한다. CSS 속성 'content'를 이용하여 이 공간에 추가로 내용을 입력할 수 있다.
::after	태그 뒤에 위치하는 공간을 선택한다. ::before와 같이 'content'를 이용하여 이 공간에 추가로 내용을 입력할 수 있다.
::selection	드래그한 글자를 선택한다. 'color', 'background-color', 'cursor', 'caret-color', 'outline-', 'text-decoration-', 'text-shadow' 속성만 적용할 수 있다.

[1] 예를 들어 input[disabled]는 (disabled에 무슨 값을 지정했는지에 상관없이, 심지어 값을 아예 지정하지 않고 disabled만 명시해도) 해당 속성이 있는 <input> 태그를 선택한다.[2] 예를 들어 [lang|=zh]는 lang 속성이 zh, zh-CN, zh-TW, ...인 요소를 모두 선택한다. (출처)[3] 예를 들어 어떤 요소의 클래스를

box

의 2개로 설정했을 때, [class*=ow]의 경우 yellow 클래스에 'ow'가 있으므로 선택이 되지만, [class~=ow]의 경우 ow 클래스는 설정되어 있지 않기 때문에 선택이 되지 않는다.[4] href 속성이 없어도 링크만 안 될 뿐이지 <a> 태그 자체는 정상적으로 작동한다(placeholder hyperlink라고 한다).[5] 특정한 요소를 고르는 것이 아니라 이미 선택된 요소의 특정 부분에 스타일을 적용한다. 가상 클래스와 구분하기 위해 원칙적으로 콜론(:)을 2개 사용하지만, 1개 사용해도 정상적으로 작동한다.[6] 특정한 문장부호('-', '_', 따옴표, 괄호 등)로 시작할 경우 그 문장 부호부터 본문의 첫 번째 글자까지 선택된다. 예를 들어 '"foobar"'의 {{{::first-letter}}는 '"f'의 두 글자이다.[7] 예를 들어 input[disabled]는 (disabled에 무슨 값을 지정했는지에 상관없이, 심지어 값을 아예 지정하지 않고 disabled만 명시해도) 해당 속성이 있는 <input> 태그를 선택한다.[8] 예를 들어 input[disabled]는 (disabled에 무슨 값을 지정했는지에 상관없이, 심지어 값을 아예 지정하지 않고 disabled만 명시해도) 해당 속성이 있는 <input> 태그를 선택한다.[9] 예를 들어 [lang|=zh]는 lang 속성이 zh, zh-CN, zh-TW, ...인 요소를 모두 선택한다. (출처)[10] 예를 들어 [lang|=zh]는 lang 속성이 zh, zh-CN, zh-TW, ...인 요소를 모두 선택한다. (출처)[11] 예를 들어 어떤 요소의 클래스를

box

의 2개로 설정했을 때, [class*=ow]의 경우 yellow 클래스에 'ow'가 있으므로 선택이 되지만, [class~=ow]의 경우 ow 클래스는 설정되어 있지 않기 때문에 선택이 되지 않는다.[12] 예를 들어 어떤 요소의 클래스를 box의 2개로 설정했을 때, [class*=ow]의 경우 yellow 클래스에 'ow'가 있으므로 선택이 되지만, [class~=ow]의 경우 ow 클래스는 설정되어 있지 않기 때문에 선택이 되지 않는다.[13] href 속성이 없어도 링크만 안 될 뿐이지 <a> 태그 자체는 정상적으로 작동한다(placeholder hyperlink라고 한다).[14] 특정한 요소를 고르는 것이 아니라 이미 선택된 요소의 특정 부분에 스타일을 적용한다. 가상 클래스와 구분하기 위해 원칙적으로 콜론(:)을 2개 사용하지만, 1개 사용해도 정상적으로 작동한다.[15] 특정한 문장부호('-', '_', 따옴표, 괄호 등)로 시작할 경우 그 문장 부호부터 본문의 첫 번째 글자까지 선택된다. 예를 들어 '"foobar"'의 {{{::first-letter}}는 '"f'의 두 글자이다.[16] href 속성이 없어도 링크만 안 될 뿐이지 <a> 태그 자체는 정상적으로 작동한다(placeholder hyperlink라고 한다).[17] href 속성이 없어도 링크만 안 될 뿐이지 <a> 태그 자체는 정상적으로 작동한다(placeholder hyperlink라고 한다).[18] 특정한 요소를 고르는 것이 아니라 이미 선택된 요소의 특정 부분에 스타일을 적용한다. 가상 클래스와 구분하기 위해 원칙적으로 콜론(:)을 2개 사용하지만, 1개 사용해도 정상적으로 작동한다.[19] 특정한 문장부호('-', '_', 따옴표, 괄호 등)로 시작할 경우 그 문장 부호부터 본문의 첫 번째 글자까지 선택된다. 예를 들어 '"foobar"'의 {{{::first-letter}}는 '"f'의 두 글자이다.[20] 특정한 문장부호('-', '_', 따옴표, 괄호 등)로 시작할 경우 그 문장 부호부터 본문의 첫 번째 글자까지 선택된다. 예를 들어 '"foobar"'의 {{{::first-letter}}는 '"f'의 두 글자이다.

:active	클릭하고 있는 요소를 선택한다.
:hover	커서가 올라와 있는 요소를 선택한다.

:link	href 속성이 명시된[17] <a> 요소를 선택한다.
:visited	방문했던 링크가 걸린 <a> 요소를 선택한다.