현재 번역은 완벽하지 않습니다. 한국어로 문서 번역에 동참해주세요.

CSS 에서, 선택자는 스타일을 적용하려는 웹 페이지의 HTML 요소를 고를 때 사용됩니다. 다양한 CSS의 선택자들을 사용할 수 있기 때문에, 당신이 각 요소에 대해 스타일을 선택할때 세밀하게 지정해 줄 수 있습니다. 다음 몇개의 문서에서 우리는 몇개의 요소들을 아주 자세히 살펴보고, 그 요소가 어떻게 작동하는지 살펴볼 것입니다.

전재조건: 기본적인 컴퓨터 지식, 기본적인 프로그램 설치 방법, 파일작업에 대한 기본적 지식, HTML 기본 ('HTML에 대해 소개합니다'로 공부하세요), 그리고 How CSS works에 대한 아이디어.
목적: CSS 선택자가 어떻게 동작하는지 자세히 배우기.

기본

지난 글에서 CSS 문법과 전문용어에 대해 자세히 설명했습니다. 정리하자면, 선택자는 CSS 규칙의 일종이며 CSS 선언부 블럭 바로 앞에 위치합니다.

선택자의 다양한 유형

선택자는 다음과 같이 분류될 수 있습니다.

  • 간단한 선택자: 하나 이상의 요소에 element type, class 또는 id에 따라 대응합니다.
  • 속성 선택자: 하나 이상의 요소에 속성이나 속성값에 따라 대응합니다.
  • 가상 클래스: 특정한 상황에서만 존재하는 하나 이상의 요소에 대응합니다. 예를 들어, 마우스 포인터를 올려놨을 때만 나타나는 요소라던지, 비활성화되거나 체크표시된 체크박스라던지, DOM 트리구조에 부모의 첫번째 자식요소에 해당합니다.
  • 가상 요소: 어떤 요소와 관련되어 특정 위치에 있는 하나 이상의 콘텐츠에 대응합니다. 예를 들어, 매 문단의 첫 번째 단어라던가, 어떤 요소 바로 앞에 위치한 동적(generated) 콘텐츠에 해당합니다.
  • 결합자: 실제 선택자는 아니고, 매우 특별한 선택을 하기 위해 두개 이상의 선택자를 결합하는 방법입니다. 예를 들어, divs의 직계 자손(direct descendants)인 문단만 선택하거나, 제목 바로 뒤에 위치한 문단 같은 것을 말합니다.(역주 : AND)
  • 다중 선택자: 마찬가지로, 실제 선택자는 아닙니다. 한 개의 CSS 규칙에 여러개의 선택자를 쉼표로 구분하여 정의하면, 그 선택자들에 해당하는 모든 요소들을 한번에 선택할 수 있습니다.(역주 : OR)

선택자에 대한 문서

다음 네 건의 문서는 선택자를 다른 관점으로 다룹니다. 학습자들이 겁먹지 않도록 학습의 이정표를 제공하기위해 많은 정보들을 추려서 선정했습니다. 선정된 문서들은 다음과 같습니다.

뭔가 막힐 때에는, 먼저 Simple selectors를 정독하기를 강력하게 추천합니다.

문서 태그 및 공헌자

 이 페이지의 공헌자: sephiron99, beingboring, CodeRi13
 최종 변경: sephiron99,