Selectors

Editing
  • account_tree
  • bug_report

:lang()

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

사용 가능한 선택자 타입

<:lang()>

DEVDIC-Specified Data Types
  • Selectors Level 4DEVDIC-Specified Data Types
    <complex-selector>?:lang(<language-range>)

포함된 타입

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

  • <language-range>

    DEVDIC-Specified Data Types

    문서의 언어 코드를 나타낸다.

    • Selectors Level 4DEVDIC-Specified Data Types
      [ <ident> | <string> ]# | <empty-string>

      하나 이상의 언어 코드 목록을 지정하거나 빈 문자열을 지정한다. <empty-string>을 지정하는 경우(:lang(""))에 언어 코드가 적용되지 않은 요소와 일치한다.

    Details

    포함된 타입

    • <empty-string>

      DEVDIC-Specified Data Types

      빈 문자열을 나타낸다.

      Details

      포함된 타입

      • <string>

        따옴표로 감싸진 데이터 유형을 표현한다.

        • "this is a 'string'."
        Details

        동일한 타입을 사용하는 관련 속성

        모든 속성을 표시하지 않을 수도 있다.

        • font-family

          글꼴을 지정한다.

        • content

          가상 요소로 생성할 콘텐츠를 설정한다.

        • quotes

          인용 부호의 유형을 설정한다.

    • <ident>

      식별자로 사용되는 임의의 문자열을 나타낸다.

    • <string>

      따옴표로 감싸진 데이터 유형을 표현한다.

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

    • Selectors Level 4
      <compound-selector> [ <combinator>? <compound-selector> ]*
    Details

    포함된 타입

    • <combinator>

      결합자는 두 개 이상의 <compound-selector>가 결합하는 관계를 나타낸다. 결합자는 복합적으로 사용될 수 있다. 결합 관계에서 맨 끝쪽의 선택자에 일치하는 요소가 스타일 적용 대상이 된다.

      기호결합 관계설명사용 예
      ">"부모 > 자식두 요소 사이의 하위 관계를 나타낸다..header > span
      "+"형제 + 다음 형제동등 관계를 가지며 바로 뒤의 요소를 나타낸다.h1.title + h2
      "~"형제 ~ 이후의 모든 형제동등 관계를 가지며 이후의 모든 요소를 나타낸다.h1 ~ pre
      "||"기준 열(column) || 대상 열(column)

      기준 요소가 속하는 열(column)에 대상 열(column)이 속해 있는 경우를 나타낸다.

      현재 웹브라우저의 지원 현황을 확인할 필요가 있다.
      col.selected || td
      • Selectors Level 4
        '>' | '+' | '~' | [ '|' '|' ]
    • <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 기능이 없다면 사용되는 타입이 동일한 타입을 사용하는 다른 항목에서 설명하거나 없는 경우이다.
          타입에 대한 자세한 설명은 다음 링크를 참조하라.[]

구문

Selectors Level 4
:lang(ko)

한국어로 작성된 콘텐츠를 선택자로 사용한다.

Example

버전 명세

Modules
Module NameStatusSummary
Selectors Level 4

Last review date: 2023-2-23

지원 웹브라우저