Selectors

Selectors

  • bug_report

CSS Selectors

CSS Selector(선택자)는 CSS 속성을 통해서 원하는 디자인 처리를 하고자 할 때 대상 요소를 지정하는 것을 의미한다. 즉 아래와 같은 선택자 사용 방식을 가진다.

선택자 {
    속성: 값;
}

CSS에서는 다양한 선택자 방식을 지원하고 있으며 상황과 조건에 따라 원하는 선택자를 작성하여 디자인 처리를 한다.

  • Attribute selectors

    요소의 애트리뷰트(attribute)을 대상으로 표현식과 일치되는 요소를 선택자로 사용한다.

  • Combinators

    요소와 요소가 결합하는 형태를 이용한 선택자이다.

  • Element Display State Pseudo-classes

    요소의 화면 표시 상태를 사용한 선택자 방식이다.

    • :fullscreen

      웹 브라우저가 전체 화면 모드가 될때 선택자로 사용이 된다.

    • :modal

      다른 요소와의 모든 상호 작용을 배제하는 상태에 있는 요소를 나타낸다.

    • :picture-in-picture

      요소가 PIP(picture in picture) 모드일 경우에 동작한다.

  • Elemental selectors

    직접적으로 요소를 선택하는 방식이다. 스타일 적용 우선 순위가 낮은 방식이다.

    • :defined

      유저 에이전트에 내장된 모든 표준 요소와 성공적으로 정의된 사용자 정의 요소를 포함하여 정의된 모든 요소와 일치한다.

    • Namespace in Elemental Selectors

      네임스페이스가 사용된 문서에서 타입 선택자, 범용 선택자에 대한 선택적 네임스페이스 구성 요소를 허용한다.

    • Tag Type Selector

      요소의 태그 명(type)을 이용한 선택 방식이다.

    • Universal Selector

      모든 요소를 대상으로 하는 전체 선택자 패턴이다.

  • Input Pseudo-classes

    이 섹션의 가상 클래스는 대부분 HTML의 입력 요소와 같이 사용자 입력을 받는 요소에 적용된다.

    • :autofill

      웹브라우저에 의해 제시된 값으로 채워질 때 일치한다. 사용자가 필드의 값을 수정하면 더이상 일치되지 않는다.

    • :checked

      <input> 태그의 type 속성이 radio이거나 checkbox일 때 체크된 경우에 선택자로 사용된다.

    • :default

      입력 요소 그룹 중에서 기본 값을 갖는 요소를 선택자로 사용한다.

    • :disabled

      비활성화(선택, 클릭, 입력 불가)된 요소를 선택자로 사용한다. 이러한 요소에는 해당하는 활성화 상태가 있어야 비교가 되어진다.

    • :enabled

      사용 가능(선택, 클릭, 입력)한 요소가 선택자로 사용된다. 이러한 요소에는 해당하는 비활성화 상태가 있어야 비교가 되어진다.

    • :in-range

      입력 요소의 값이 min과 max 속성의 설정 값 내에 있는 경우 선택자로 사용이 된다.

    • :indeterminate

      값이 불확정 상태인 입력 요소와 일치한다.

    • :invalid

      유효하지 않은 값을 가진 폼 요소를 선택자로 사용한다.

    • :optional

      필수 입력을 의미하는 속성인 required가 설정되어 있지 않은 input, select, textarea 요소를 선택자로 사용한다.

    • :out-of-range

      입력 요소의 값이 min과 max 속성의 설정 값 범위 밖에 있는 경우 선택자로 사용이 된다.

    • :placeholder-shown

      placehoder로 표시되는 키보드 입력 요소의 스타일 처리를 위한 선택자로 사용된다.

    • :read-only

      readonly 속성이 명시된 읽기 전용 입력 요소(input, textarea)인 경우에 선택자로 사용이 된다.

    • :read-write

      편집 가능한 입력 요소(input, textarea)인 경우에 선택자로 사용이 된다.

    • :required

      필수 입력을 의미하는 속성 required가 명시된 input, select, textarea 요소를 선택자로 사용한다.

    • :valid

      유효한 값을 가진 폼 요소를 선택자로 사용한다.

  • Linguistic Pseudo-classes

    웹 문서에서 사용 언어를 대상으로 가상 클래스로 선택하는 방식이다.

    • :lang()

      함수형 가상 클래스이며 언어 코드를 인수로 지정하면 일치하는 lang 속성 값을 가진 요소를 선택자로 사용한다.

  • Location Pseudo-classes

    웹 문서의 위치를 기반으로 가상 클래스로 선택하는 방식이다.

    • :any-link

      하이퍼링크의 소스 앵커 역할을 하는 요소를 사용한다. 예를 들어서 href 속성이 있는 a 또는 area 요소는 하이퍼링크이므로 :any-link와 일치한다.

    • :link

      href 속성을 가지고 있으면서 사용자가 방문한 적이 없는 경우에 선택자로 사용이 된다.

    • :scope

      범위 지정 루트를 나타내며 실제 요소이거나 가상 요소(예: DocumentFragment)일 수 있다. 범위 지정 루트가 없으면 :scope는 문서의 루트를 나타낸다.

    • :target

      URL 해쉬와 일치하는 id를 가진 유일한 요소를 선택자로 사용한다.

    • :visited

      href 속성을 가지고 있으면서 방문한 적이 있는 경우에 선택자로 사용이 된다.

  • Logical Combinations

    논리적인 연산을 통해 대상을 선택하는 방식이다.

    • :has()

      관계적인 논리를 판단하는 함수형 가상 클래스이며 인수로 지정된 선택자(<forgiving-relative-selector-list>)가 이 요소에 대해 연결자가 의미하는 관계를 가지고 하나 이상의 요소와 일치하는 경우 선택한다.

    • :is()

      인수로 주어진 <forgiving-selector-list>에서 일치하는 선택자 항목의 존재 여부 결과를 최종 선택하는데 사용한다.

    • :not()

      부정 가상 클래스 함수로 인수로 지정된 선택자를 부정하는 요소만 선택자로 사용이 된다.

    • :where()

      특이성 조정 가상 클래스 :where()는 :is()와 동일한 구문 및 기능을 가진 함수형 가상 클래스이다. 인수로 지정된 선택자 목록에서 개별적으로 일치한다면 일치된 모든 대상을 선택한다.

    • Selector Lists

      2개 이상의 선택자들을  콤마(,)로 구분하여 그룹으로 묶어 선택자로 사용한다.

  • Page Selectors

    페이지 유형 선택기 또는 페이지 가상 클래스로 구성되며 0개 이상의 추가 페이지 가상 클래스가 뒤에 올 수 있다. 선택기 구성 요소 사이에는 공백이 허용되지 않는다. 페이지 유형 선택기는 대소문자를 구분하지만 페이지 가상 클래스는 구분하지 않는다.

    • :first

      @page rule과 함께 사용되며 인쇄될 문서의 첫번째 페이지를 선택자로 사용한다.

    • :left

      @page rule과 함께 사용되며 인쇄될 문서의 모든 왼쪽 페이지를 선택자로 사용한다.

    • :right

      @page rule과 함께 사용되며 인쇄될 문서의 모든 오른쪽 페이지를 선택자로 사용한다.

  • Pseudo-elements

    문서 언어에 의해 명시적으로 생성된 요소 이외의 추상 요소를 나타낸다. 문서 트리에 맞추도록 제한되지 않으므로 문서의 트리 구조에 매핑되지 않는 문서 부분을 선택하고 스타일을 지정하는 데 사용할 수 있다.

    • ::after

      선택자를 갖는 요소 내 콘텐츠 뒤쪽에 가상 요소를 만들어 선택자로 사용한다.

    • ::backdrop

      HTMLDialogElement를 이용해서 모달(modal) 대화 창을 생성할 때 대화 상자 뒤쪽에 가상 요소를 생성해 대화 상자외부의 콘텐츠와 분리할 수 있다.

    • ::before

      선택자를 갖는 요소 내 콘텐츠 앞쪽에 가상 요소를 만들어 선택자로 사용한다.

    • ::file-selector-button

      유저 에이전트가 input 요소의 type 애트리뷰트가 file인 요소를 렌더링 하는 경우를 나타낸다.

    • ::first-letter

      선택자를 갖는 요소 내의 첫 번째 행의 첫 글자를 가상 요소로 사용한다.

    • ::first-line

      선택자를 갖는 요소 내의 첫 번째 행을 가상의 요소로 사용한다.

    • ::marker

      목록 항목의 자동 생성 마커를 나타낸다.

    • ::part()

      일치하는 part 속성이 있는 Shadow Tree 내의 모든 요소를 가상요소 선택자로 사용한다.

    • ::placeholder

      input, textarea의 placeholder  속성으로 지정된 텍스트를 가상 요소로 사용한다.

    • ::selection

      선택자를 갖는 요소 내의 텍스트를 드래그하여 블럭으로 잡는 경우에 선택자로 사용이 된다.

  • Resource State Pseudo-classes

    Selectors Level 4 사양에 새롭게 추가되었으나  작성일 기준으로 아직은 대부분의 웹브라우저에서 지원하지 않고 있다.

    • :buffering

      미디어 요소가 적극적으로 미디어 데이터를 얻으려고 시도하지만 아직 재생을 재개할 만큼 충분한 데이터를 얻지 못했기 때문에 재생을 계속 할 수 없는 경우 재생 또는 일시 중지될 수 있는 요소를 나타낸다.

    • :muted

      미디어 요소가 음소거(강제 무음) 상태일 때 소리를 들을 수 있는 요소를 나타낸다.

    • :paused

      미디어 요소가 일시 중지된(즉, 재생 중이 아닌) 경우 재생 또는 일시 중지 될 수 있는 요소를 나타낸다.

    • :playing

      미디어 요소가 재생 중일 때 재생 또는 일시 중지될 수 있는 요소를 나타낸다.

    • :seeking

      미디어 요소가 'seeking' 상태일 때를 나타낸다.

    • :stalled

      미디어 요소가 적극적으로 미디어 데이터를 얻으려고 시도하지만 일정 시간 동안 데이터를 받지 못해 재생을 계속할 수 없는 요소를 나타낸다.

    • :volume-locked

      미디어 요소가 프로그래밍 방식으로 요소의 소리 크기를 변경할 수 없는 경우를 나타낸다.

  • Scoping

    쉐도우(shadow) DOM내의 요소에 대한 선택 방식이다.

    • :host

      쉐도우 트리(shadow tree)의 호스트(host)와 일치한다.

    • :host()

      내부에서 사용되는 CSS가 포함된 쉐도우(shadow) DOM의 쉐도우(shadow) 호스트(host)를 선택하지만 인수로 지정된 선택자가 쉐도우(shadow) 호스트(host)와 일치하는 경우 사용한다.

    • :host-context()

  • Time-dimensional Pseudo-classes

    문서의 음성 렌더링 중 또는 자막 렌더링을 위해 WebVTT를 사용하여 비디오를 표시하는 동안과 같이 일부 타임라인에서 현재 표시되거나 활성 상태인 위치와 관련하여 요소를 분류한다. Selectors Level 4 사양에 새롭게 추가되었으나  작성일 기준으로 아직은 대부분의 웹브라우저에서 지원하지 않고 있다.

    • :future

      :current 요소 다음에 완전히 발생하도록 정의된 모든 요소를 나타낸다.

    • :past

      :current 요소 이전에 완전히 발생하도록 정의된 모든 요소를 나타낸다.

  • Tree-Structural Pseudo-classes

    단순한 선택자나 선택자 조합으로 표현할 수 없는 구조적인 추가 정보를 기반으로 요소를 선택할 수 있도록 한다. DOM 트리 내의 요소에만 적용되며 CSS에 의한 가상 요소는 대상이 아니다.

    • :empty

      자식 요소(텍스트, 공백 포함)가 존재하지 않는 경우에 선택자로 사용된다.

    • :first-child

      같은 레벨(형제) 요소 그룹 중에서 첫 번째 요소를 선택자로 사용한다.

    • :first-of-type

      같은 레벨(형제) 관계 요소 그룹 중에서 선택자와 동일한 타입의 첫 번째 요소를 선택자로 사용한다.

    • :last-child

      같은 레벨(형제) 요소 그룹 중에서 마지막 요소를 선택자로 사용한다.

    • :last-of-type

      같은 레벨(형제) 관계 요소 그룹 중에서 선택자와 동일한 유형의 마지막 요소를 선택자로 사용한다.

    • :nth-child()

      같은 레벨(형제) 관계의 요소 그룹에서 인수로 지정한  순서에  해당하는 요소를 선택자로 사용한다.

    • :nth-last-child()

      같은 레벨(형제) 요소 그룹 중에서 뒤에서 부터 인수로 지정된 위치 값으로 요소를 선택자로 사용한다.

    • :nth-last-of-type()

      같은 레벨(형제) 요소 그룹 내에서 선택자와 동일한 타입을 기준으로 뒤에서 부터의 위치 값을 인수로 지정해 해당되는 요소를 선택자로 사용한다.

    • :nth-of-type()

      같은 레벨(형제) 요소 그룹 (단위)내에서 선택자와 동일한 타입을 갖는 대상중에 인수로 지정된 위치(순서) 값을 갖는 요소를 선택자로 사용한다.

    • :only-child

      동등 레벨(형제)이 없는 단일 요소를 선택자로 사용한다.

    • :only-of-type

      선택자와 동일한 타입으로서 동등 레벨(형제)이 없는 단일 요소인 경우에만 선택자로 사용된다.

    • :root

      웹 문서의 최상위 요소를 선택자로 사용한다.

  • User Action Pseudo-classes

    대화형 사용자 인터페이스는 때때로 사용자의 동작에 따라 렌더링을 변경할 수 있다. 사용자 동작에 따라 대상을 선택하는 방식이다.

    • :active

      요소가 활성 상태일 경우 선택자로 사용한다.

    • :focus

      요소가 클릭(탭)되거나 키보드의 TAB키로 이동 선택될 때 선택자로 사용이 된다.

    • :focus-visible

      :focus와 동일하나 키보드를 사용하여 포커스가 발생한 경우를 포함한다. 사용자 접근성에 더 좋은 방식이다.

    • :focus-within

      요소가 포커스(:focus)를 받거나 포커스(:focus)를 받은 하위 요소를 포함하는 경우에 선택자로 사용이 된다.

    • :hover

      마우스 포인터가 올려진 요소가 선택자로 사용이 된다.

©2023 devdic.com, Korea

출처를 밝힌 리소스 이외의 본 레퍼런스에 사용된 모든 생성물의 소유 및 저작권은 devdic.com에 있습니다. 특별히 재배포를 금지한 것 이외는 재배포가 가능하며 반드시 출처를 표기해 주시기 바랍니다.
현재는 베타 버전으로 미등록 및 불완전한 콘텐츠가 일부 있을 수 있습니다. 오류 및 기술 자료 제보(건의)는 언제든지 환영하며 감사드립니다.
기본적으로 W3C 기술 사양을 기준으로 작성하였으며 일반적이지 않은 기술 설명에 대한 내용의 일부는 Mozilla의 MDN web docs에서 도움 받았음을 밝힙니다. 그들을 존경합니다.

master@cydemy.com