CSS에서 선택자는 스타일을 적용하려는 웹 페이지의 HTML 요소를 고를 때 사용합니다. 다양한 종류의 CSS 선택자로 어떤 요소를 선택할 지 세밀하게 조절할 수 있습니다. 다음 몇 장 동안 서로 다른 종류의 선택자에 대해 자세하게 알아보겠습니다.

전제 조건: 기본적인 컴퓨터 능력, 기본적인 소프트웨어 설치파일 조작의 기본적인 지식, HTML 기본 (HTML 소개 학습), CSS의 작동 방식.
목적: CSS 선택자가 어떻게 동작하는지 자세히 배우는 것.

기본

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

선택자의 다양한 유형

선택자는 다음 분류로 나눌 수 있습니다.

  • 단순 선택자: 유형, class, id로 한 개 이상의 요소에 대응합니다.
  • 속성 선택자: 요소 속성이나 속성 값에 따라 한 개 이상의 요소에 대응합니다.
  • 의사클래스: 특정 상태로 존재하는 한 개 이상의 요소에 대응합니다. 예를 들면 마우스 포인터를 올려놓은 요소, 체크했거나 하지 않은 체크박스, DOM 트리구조에서 부모의 첫번째 자식 등이 있습니다.
  • 의사요소: 어떤 요소와 관련되어 특정 위치에 있는 내용 한 개 이상에 대응합니다. 예를 들면 매 문단의 첫 번째 단어, 어떤 요소 바로 앞에 생성할 수 있는 내용 등입니다.
  • 결합자: 실제 선택자는 아니고, 매우 상세한 선택을 하기 위해 두 개 이상의 선택자를 결합할 수 있습니다. 예를 들면 <div>의 직계 자손(즉, <div> 바로 밑에 있는 자손)인 문단이나 제목 바로 다음으로 배치한 문단 등입니다.
  • 다중 선택자: 마찬가지로, 실제 선택자는 아닙니다. 한 개의 CSS 규칙에 여러개의 선택자를 쉼표로 구분하여 정의하면 선택자들이 대응하는 모든 요소에 같은 규칙을 적용할 수 있습니다.

선택자 문서 훑어보기

다음 네 건의 문서는 선택자의 다른 면모를 다룹니다. 내용이 많기도 하고, 덜 위압적으로 보이면서 여러분에게 중간중간 뚜렷한 휴식 구간을 드리기 위해 다음처럼 구간 별로 나눠놨습니다.

중요한 정보를 놓칠 수도 있으니 단순 선택자를 우선 읽어보시기를 강력하게 추천합니다.

문서 태그 및 공헌자

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