문서의 임의 삭제는 제재 대상으로, 문서를 삭제하려면 삭제 토론을 진행해야 합니다. 문서 보기문서 삭제토론 선택자 (문서 편집) [[분류:스타일 시트 언어]] [include(틀:관련 문서, top1=CSS)] [include(틀:프로그래밍 언어 문법)] [목차] == 개요 == {{{+1 [[選]][[擇]][[子]] / Selector}}} [[CSS]]에서 스타일을 입힐 [[HTML]] 등 [[마크업 언어]]의 요소를 선택하는 문자이다. {{{#!syntax css 선택자 { (스타일 속성): (스타일 값); } }}} HTML 요소에 스타일을 입히는 대부분의 CSS 코드는 위와 같은 구조로 이루어져 있다. 보다시피 스타일들을 나열한 [[중괄호]]의 앞부분에 오는 게 바로 선택자이다. 스크립트 언어에서도 선택자를 사용할 수 있다. [[jQuery]]에서는 {{{$('선택자')}}}와 같은 방식으로 HTML 태그를 선택한다. 바닐라 [[자바스크립트]]에서는 {{{document.querySelector('선택자')}}}와 {{{document.querySelectorAll('선택자')}}}의 두 가지 방법이 있는데, 전자는 해당 선택자의 기준을 만족하는 요소 중 첫 번째 요소만 반환하고, 후자는 해당 선택자의 기준을 만족하는 모든 요소를 [[배열]] 형태[* 다만 실제 배열 자료형은 아니고 유사 배열이라 배열 메소드를 사용하려면 {{{[...document.querySelectorAll('선택자')]}}}와 같이 실제 배열로 바꾸는 과정이 필요하다.]로 반환한다. 나무위키에서는 wiki, html 문법에서 인라인 스타일, 즉 태그에 직접 적용되는 스타일만 다루기 때문에 나무위키에서 선택자를 사용할 일은 사실 없다. == 종류 및 문법 == 이 문단에서는 혼동을 피하기 위해 '바로 아래' 같은 모호한 표현 대신 특수한 표현을 사용한다. * '부모'/'자식'은 어떤 태그 안에 다른 태그가 있는 관계를 뜻한다. 예를 들어 {{{}}}와 같은 구조에서 은 의 자식이고, 는 의 부모이다. * '형제'는 같은 부모를 둔 태그들을 뜻한다. 예를 들어 {{{}}}와 같은 구조에서 바로 다음에 오는 형제는 이다. {{{*}}}이나 유형 선택자가 맨 앞에 오고, 그 뒤에 {{{button.foo.bar:hover}}}와 같이 여러 종류를 중첩할 수 있고, 태그 없이 다른 선택자만 중첩할 수도 있다. 예시로 든 선택자는 'foo', 'bar' 클래스의 {{{}}} 태그 중 마우스를 올린 요소를 선택한다는 의미이다. {{{p.foo, p.bar, ...}}}와 같은 형태로 콤마로 구분하면 여러 선택자를 한꺼번에 선택할 수도 있다. 구조 선택자의 경우 인자로 수열을 받는 선택자가 있는데, {{{an+b}}}/{{{an}}} 형태의 등차수열이나 {{{even}}}(짝수, =2n), {{{odd}}}(홀수, =2n+1)이 올 수 있다. 이때 첫 번째 자식이 1이며, n은 0 이상의 정수이다. {{{-n+3}}}과 같이 써서 처음 3개만 선택할 수도 있다. === 기본 선택자 === * 전역 선택자 ||*||모든 요소를 선택한다.|| * 유형 선택자 ||태그||해당 태그의 요소를 선택한다.|| * ID 선택자 ||#ID||해당 ID의 요소를 선택한다.|| * 클래스 선택자 ||.클래스||해당 클래스의 요소를 선택한다. [* 클래스 여러개가 모두 있는 요소를 선택할 경우 {{{.foo.bar}}}처럼 해당 클래스명을 붙여서 쓴다. ] || * 속성 선택자 ||[속성]||태그에 해당 속성이 명시되어 있는 요소를 선택한다.[* 예를 들어 {{{input[disabled]}}}는 (disabled에 무슨 값을 지정했는지에 상관없이, 심지어 값을 아예 지정하지 않고 disabled만 명시해도) 해당 속성이 있는 {{{}}} 태그를 선택한다.]|| ||[속성=문자열]||태그에 해당 속성이 명시되어 있고 그 값이 해당 문자열인 요소를 선택한다.|| ||[속성~=문자열]||해당 속성의 값에 해당 문자열이 __완전한 단어로__(즉, 앞뒤가 띄어쓰기로 구분되어서) 포함되어 있는 요소를 선택한다.|| ||[속성|=문자열]||해당 속성의 값이 해당 문자열이거나 그 뒤에 하이픈(-)이 붙는 것으로 시작하는 요소를 선택한다.[* 예를 들어 {{{[lang|=zh]}}}는 lang 속성이 [[중국어|__zh__]], [[간체|__zh-__CN]], [[번체|__zh-__TW]], ...인 요소를 모두 선택한다. ([[https://developer.mozilla.org/en-US/docs/Web/CSS/Attribute_selectors|출처]])]|| ||[속성*=문자열]||해당 속성의 값에 해당 문자열이 포함되어 있는 요소를 선택한다.[* 예를 들어 어떤 요소의 클래스를 {{{yellow box}}}의 2개로 설정했을 때, {{{[class*=ow]}}}의 경우 {{{yellow}}} 클래스에 'ow'가 있으므로 선택이 되지만, {{{[class~=ow]}}}의 경우 {{{ow}}} 클래스는 설정되어 있지 않기 때문에 선택이 되지 않는다.]|| ||[속성^=문자열]||해당 속성의 값이 해당 문자열로 시작하는 요소를 선택한다.|| ||[속성$=문자열]||해당 속성의 값이 해당 문자열로 끝나는 요소를 선택한다.|| === 가상 클래스(pseudo-class) === * 구조 선택자 ||:first-child||형제 중 첫 번째로 오는 요소를 선택한다.|| ||:last-child||형제 중 마지막으로 오는 요소를 선택한다.|| ||:nth-child(수열)||형제 중 (수열) 번째에 있는 요소를 선택한다.|| ||:nth-last-child(수열)||형제 중 __뒤에서__ (수열) 번째에 있는 요소를 선택한다.|| ||:nth-of-type(수열)||__태그별로__ 형제 중 (수열) 번째에 있는 요소를 선택한다. 태그 이외 다른 선택자에는 반응하지 않는다.|| * 반응 선택자 ||:active||클릭하고 있는 요소를 선택한다.|| ||:hover||커서가 올라와 있는 요소를 선택한다.|| * 상태 선택자 ||:checked||체크되어 있는 체크박스, 라디오 버튼이나 드롭다운 메뉴의 선택되어 있는 선택지()를 선택한다.|| ||:focus||현재 입력하고 있는, 즉 커서가 깜박이고 있는 요소를 선택한다.|| ||:enabled||활성화되어 있는, 즉 내용을 수정할 수 있는 요소를 선택한다.|| ||:disabled||비활성화되어 있는, 즉 내용을 수정할 수 __없는__ 요소를 선택한다.|| * 링크 선택자 ||:link||href 속성이 명시된[* href 속성이 없어도 링크만 안 될 뿐이지 태그 자체는 정상적으로 작동한다(placeholder hyperlink라고 한다).] 요소를 선택한다.|| ||:visited||방문했던 링크가 걸린 요소를 선택한다.|| * 부정 선택자 ||:not(선택자)||해당 선택자에 해당하지 __않는__ 요소들을 선택한다.|| * :root 선택자 ||:root||html 전체를 선택한다.[* 즉, html 파일을 대상으로 하는 경우 기능적으로는 html을 선택자로 지정하는 것과 거의 동일하다. 그렇다고 완전히 동일한 것은 아니며, :root가 특이성이 더 높기 때문에 :root와 html에 같은 스타일 속성을 다르게 설정한다면 순서에 상관없이 :root의 스타일 값이 우선된다.] 보통 전역 변수를 선언할 때 쓴다.|| === 가상 요소(pseudo-element) === 특정한 요소를 고르는 것이 아니라 이미 선택된 요소의 특정 부분에 스타일을 적용한다. 콜론(:)을 2개 사용하며, CSS Level 3 이전에는 콜론 1개를 사용했었기 때문에 1개만 써도 대부분의 브라우저에서는 정상적으로 작동하긴 하지만 권장하지 않는다. * 가상 요소 ||::first-letter||첫 번째 글자를 선택한다. {{{::before}}}의 영향을 받는다. [[https://developer.mozilla.org/en-US/docs/Web/CSS/::first-letter#Allowable_properties|특정한 CSS 속성만 사용할 수 있는 제한이 있다(영어)]].[* 특정한 문장부호('-', '_', 따옴표, 괄호 등)로 시작할 경우 그 문장 부호부터 본문의 첫 번째 글자까지 선택된다. 예를 들어 '"foobar"'의 {{{::first-letter}}}는 '"f'의 두 글자이다.]|| ||::first-line||첫 번째 줄을 선택한다. [[https://developer.mozilla.org/en-US/docs/Web/CSS/::first-line#Allowable_properties|특정한 CSS 속성만 사용할 수 있는 제한이 있다(영어)]].|| ||::before||태그 앞에 위치하는 공간을 선택한다. CSS 속성 'content'를 이용하여 이 공간에 추가로 내용을 입력할 수 있다.|| ||::after||태그 뒤에 위치하는 공간을 선택한다. {{{::before}}}와 같이 'content'를 이용하여 이 공간에 추가로 내용을 입력할 수 있다.|| ||::selection||드래그한 글자를 선택한다. [[https://developer.mozilla.org/en-US/docs/Web/CSS/::selection#Allowable_properties|'color', 'background-color', 'cursor', 'caret-color', 'outline-*', 'text-decoration-*', 'text-shadow' 속성만 적용할 수 있다.]]|| === 조합자 === * 후손 조합자 ||(선택자1) (선택자2)||선택자1의 모든 하위 요소(자식, 자식의 자식, ...) 중 선택자2를 선택한다.|| * 자손 조합자 ||(선택자1) > (선택자2)||선택자1 바로 밑의 자식 중 선택자2를 선택한다.|| * 동위 조합자 ||(선택자1) + (선택자2)||선택자1의 형제 중 바로 다음에 오는 선택자2 하나를 선택한다.|| ||(선택자1) ~ (선택자2)||선택자1의 형제 중 자신보다 다음에 오는 모든 선택자2를 선택한다.|| == 특이성 == 한 요소를 가리키는 스타일이 2개 이상 있을 때, 스타일이 정의된 선택자의 종류와 개수에 따라 특이성(Specificity) 점수가 계산되고 더 높은 특이성을 가진 선택자의 스타일이 적용된다. 원문은 Specificity이며 한국어 명칭이 통일되지 않아 여러가지 이름으로 불린다. [[The Chromium Projects|크로뮴]] 기반 브라우저 개발자 도구에서 사용하는 명칭이 특이성이며, [[MDN]] 문서의 [[https://developer.mozilla.org/ko/docs/Web/CSS/Specificity|한국어 번역 기여본]]에서는 명시도, 그밖에 특수성, 특이도 등 많은 명칭이 혼재되고 있다. 이 문서에서는 특이성으로 서술한다. 특이성은 3개의 점수(A, B, C)가 따로 있으며, A 점수를 먼저 비교해서 같으면 B, 그 다음 C 점수를 차례대로 비교한다. [[올림픽 메달]] 순위 집계 방식으로 생각하면 된다. 이 방식은 Selectors [[https://www.w3.org/TR/selectors-4/#specificity-rules|Level 4]]부터 적용되었으며, [[https://www.w3.org/TR/selectors-3/#specificity|Level 3]]까지는 총 점수를 {{{-2 A \times 100 + B \times 10 + C}}}로 계산하여 비교했었다.[* 물론 대부분의 경우 Level 4와 비슷하게 동작하긴 했지만, 만약 정말 특이하게 클래스가 10개를 초과하는 선택자를 쓸 경우 아이디 선택자 1개의 우선순위를 뛰어넘게 되어 의도치 않은 결과를 낼 수 있기 때문에, 이러한 예외를 미연에 방지하기 위해 일관적인 방식으로 수정한 것으로 보인다.] 각 점수는 아래 선택자의 개수에 따라 정해진다. * A: ID 선택자 * B: 클래스 선택자, 속성 선택자, 가상 클래스 * C: 유형 선택자, 가상 요소 이밖에 전역 선택자(*), 조합자 등은 특이성에 영향을 주지 않는다. 이 점수를 [[플랑크톤]], 물고기, [[상어]]에 비유한 [[https://specifishity.com/|Specifishity]]라는 사이트가 있어 참고하면 좋다. 만약 특이성 점수가 같을 경우에는 나중에 적은 속성이 이전에 적은 속성을 덮어씌우고 적용된다. 애시당초 CSS의 본말이 'Cascading' Style Sheet ('내리' 꾸미기 서식) 이다. {{{