Selectors

Editing
  • account_tree
  • bug_report

Universal Selector

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

설명

전체 선택 방식은 스타일 적용 우선 순위가 가장 낮으며 다음 두 가지 접근 방식이 있다.

초기화
기본적으로 대부분의 요소들은 유저 에이전트의 의해 기본 스타일 값을 가지고 있다. 따라서 명시적으로 정의하지 않아도 태그의 원래 역할에 따른 적절한 기본 스타일을 갖는다. 하지만 모든 가시적인 요소들을 대상으로 특성 속성을 명시적으로 정의할 필요가 있을 수 있다. 이것을 '작성자에 의한 초기화 작업'이라고 부를 수 있는데 이 경우 웹 문서에 영향을 주는 CSS 코드의 순서상으로 앞쪽에 코드를 작성한다.
사실 전체 선택자를 사용해서 모든 요소의 특정 속성을 초기화하는 경우는 매우 드물며 이례적이다. 하지만 분명히 설계상 꼭 필요한 경우가 있을 수 있다.
선택자 패턴은 대부분 단일 방식을 사용한다. 한 개 이상의 선택자와 어떤식이든 결합하는 방식으로 사용할 경우 우선 순위 규칙에 따라 재정의가 어려울 수도 있다.
* {
  box-sizing: border-box;
}

범위 제한
초기화의 목적이 있는 게 아니라 설계상 선택하는 방식이다. 이 경우는 한 개 이상의 선택자와 결합하는 방식을 사용한다. 다른 선택자와 결합하는 방식에 따라 범위를 정해 문서 전체가 아닌 특정 범위 내에 있는 하위 전체 요소로 제한할 수 있다.
이 방식은 class 남용을 방지할 수 있고 동적인 DOM에도 효과적이다.
주의할 점은 결합관계를 갖다보니 우선 순위 계산이 힘들어 질 수도 있다. 복잡한 설계인 경우에는 철저한 작성 규칙을 정할 필요가 있다.
.header * {
  font-size: 0.9em;
}

사용 가능한 선택자 타입

<type-selector>

  • Selectors Level 4
    <wq-name> | <ns-prefix>? '*'

포함된 타입

아래 유형에서 지원하는 모든 키워드와 단위를 사용하지 않을 수도 있다.

  • <ns-prefix>

    • Selectors Level 4
      [ <ident-token> | '*' ]? '|'
    Details

    포함된 타입

    • <ident-token>

      Ident Token Railroad Diagrams

      -- - a-z A-Z _ or non-ASCII escape a-z A-Z 0-9 _ - or non-ASCII escape
  • <wq-name>

    • Selectors Level 4
      <ns-prefix>? <ident-token>

      애트리뷰트가 선언되어 있는 대상을 선택자로 사용한다.

    Details

    포함된 타입

    • <ns-prefix>

      • Selectors Level 4
        [ <ident-token> | '*' ]? '|'
      Details 기능이 없다면 사용되는 타입이 동일한 타입을 사용하는 다른 항목에서 설명하거나 없는 경우이다.
      타입에 대한 자세한 설명은 다음 링크를 참조하라.[]
    • <ident-token>

      Ident Token Railroad Diagrams

      -- - a-z A-Z _ or non-ASCII escape a-z A-Z 0-9 _ - or non-ASCII escape
      Details 기능이 없다면 사용되는 타입이 동일한 타입을 사용하는 다른 항목에서 설명하거나 없는 경우이다.
      타입에 대한 자세한 설명은 다음 링크를 참조하라.[<ident-token>]

구문

Selectors Level 3
.section > *

class .section 의 모든 자식 요소를 선택자로 사용한다.

Example

버전 명세

Modules
Module NameStatusSummary
Selectors Level 4

Last review date: 2023-2-23

Selectors Level 3

Last review date: 2023-2-23

기술 문서

전체 선택자는 보통 초기화를 해야 하는 CSS 코드 파트에서 사용될 수 있으며 전체 요소를 대상으로 CSS를 적용한다. 잘 사용하지 않지만 결합관계 선택자 패턴에서 종종 유용하게 사용될 수 있다.

지원 웹브라우저