Selectors

Editing
  • account_tree
  • bug_report

:host()

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

사용 가능한 선택자 타입

<:host()>

DEVDIC-Specified Data Types
  • CSS Scoping Module Level 1
    :host( <compound-selector> )

포함된 타입

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

  • <compound-selector>

    • Selectors Level 4
      [ <type-selector>? <subclass-selector>*[ <pseudo-element-selector> <pseudo-class-selector>* ]* ]!
    Details

    포함된 타입

    • <pseudo-class-selector>

      • Selectors Level 4
        ':' <ident-token> |':' <function-token> '(' <any-value> ')'
      Details

      포함된 타입

      • <function-token>

        0개 이상의 코드 포인트(code points)로 구성된 값을 갖는 함수를 가리키는 토큰(token)이다.

        Function Token Railroad Diagrams

        <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
      • <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>]
      • <any-value>

        <declaration-value>와 동일하지만 값이 !인 최상위 수준 <semicolon-token> 및 <delim-token>도 허용한다. 이는 모든 컨텍스트에서 유효한 CSS가 될 수 있는 모든 것을 나타낸다.

        • CSS Syntax Module Level 3
          <any-value>?
    • <pseudo-element-selector>

      • Selectors Level 4
        ':' <pseudo-class-selector>
      Details

      포함된 타입

      • <pseudo-class-selector>

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

      • <id-selector> | <class-selector> | <attribute-selector> | <pseudo-class-selector>
      Details

      포함된 타입

      • <attribute-selector>

        • Selectors Level 4
          '[' <wq-name> ']' |'[' <wq-name> <attr-matcher> [ <string-token> | <ident-token> ] <attr-modifier>? ']'
        Details

        포함된 타입

        • <attr-modifier>

          • Selectors Level 4
            | s
        • <attr-matcher>

          연산자형식선택자 대상
          =[att=val]애트리뷰트(attribute)의 값이 완전히 일치해야 한다.[type="email"]
          ~=[att~=val]애트리뷰트(attribute) 값의 공백으로 구분된 토큰 목록중에 "val" 이 포함되어야 한다. "val"에 공백이 포함되어 있거나 빈 문자열이면 무효가 된다.[class~="my"]
          |=[att|=val]애트리뷰트(attribute)의 값이 정확히 "val"이거나 "val" 바로 뒤에 "-"(U+002D)으로 시작해야 한다. 애트리뷰트(attribute)의 값에 하이픈이 포함된 경우에 활용도가 높다.a[hreflang|="en"]
          ^=[att^=val]애트리뷰트(attribute)의 값이 "val"을 접두사로 시작해야 한다. "val"이 빈 문자열이면 무효가 된다.[type^="image/"]
          $=[att$=val]애트리뷰트(attribute)의 값이 "val"을 접미사로 끝나야 한다. "val"이 빈 문자열이면 무효가 된다.a[href$=".html"]
          *=[att*=val]애트리뷰트(attribute)의 값에 하위 문자열 "val"이 하나 이상 포함되어야 한다. "val"이 빈 문자열이면 무효가 된다.[title*="hello"]

           

          • Selectors Level 4
            [ '~' | '|' | '^' | '$' | '*' ]? '='
        • <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
          • <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>]
        • <ident-token>

          Ident Token Railroad Diagrams

          -- - a-z A-Z _ or non-ASCII escape a-z A-Z 0-9 _ - or non-ASCII escape
        • <string-token>

          String Token Railroad Diagrams

          " not " \ or newline escape \ newline " ' not ' \ or newline escape \ newline '
      • <class-selector>

        • Selectors Level 4
          '.' <ident-token>
          class 값이 "mybox"인 요소를 선택자로 사용한다.
        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>]
      • <id-selector>

        • Selectors Level 4
          <hash-token>
          id 애트리뷰트의 값이 "mybox"인 요소를 선택자로 사용한다.
        Details

        포함된 타입

        • <hash-token>

          0개 이상의 코드 포인트(code points)로 구성된 값을 갖는 토큰(token)이다. 

          Hash Token Railroad Diagrams

          # a-z A-Z 0-9 _ - or non-ASCII escape
          • #[a-zA-Z0-9_-]
      • <pseudo-class-selector>

        • Selectors Level 4
          ':' <ident-token> |':' <function-token> '(' <any-value> ')'
        Details

        포함된 타입

        • <function-token>

          0개 이상의 코드 포인트(code points)로 구성된 값을 갖는 함수를 가리키는 토큰(token)이다.

          Function Token Railroad Diagrams

          <ident-token> (

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

          Ident Token Railroad Diagrams

          -- - a-z A-Z _ or non-ASCII escape a-z A-Z 0-9 _ - or non-ASCII escape
        • <any-value>

          <declaration-value>와 동일하지만 값이 !인 최상위 수준 <semicolon-token> 및 <delim-token>도 허용한다. 이는 모든 컨텍스트에서 유효한 CSS가 될 수 있는 모든 것을 나타낸다.

          • CSS Syntax Module Level 3
            <any-value>?
          Details 기능이 없다면 사용되는 타입이 동일한 타입을 사용하는 다른 항목에서 설명하거나 없는 경우이다.
          타입에 대한 자세한 설명은 다음 링크를 참조하라.[<any-value>]
    • <type-selector>

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

      포함된 타입

      • <ns-prefix>

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

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

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

        Details 기능이 없다면 사용되는 타입이 동일한 타입을 사용하는 다른 항목에서 설명하거나 없는 경우이다.
        타입에 대한 자세한 설명은 다음 링크를 참조하라.[]

예제

쉐도우 DOM을 추가하고 쉐도우 DOM을 가지고 있는 호스트가 :host()에 의해 일치한다면 선택자로 사용

버전 명세

Modules
Module NameStatusSummary
CSS Scoping Module Level 1편집자 초안

Last review date: 2023-4-23

지원 웹브라우저