Selectors

Editing
  • account_tree
  • bug_report

:read-write

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

설명

:read-only의 반대 개념으로 볼 수 있다.

사용 가능한 선택자 타입

<pseudo-class>

DEVDIC-Specified Data Types

가상 클래스 선택자 형식을 나타낸다.

모든 가상 클래스 선택자에게 적용되는 구문이지만 가상 클래스 따라 <complex-selector>에서 가능한 모든 선택자 타입이 사용되는 것은 아니므로 실제 해당 가상 클래스의 설명을 확인해야 한다.

  • Selectors Level 4DEVDIC-Specified Data Types
    <complex-selector>?:read-write

포함된 타입

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

  • <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
:read-write

입력 가능한 모든 폼 요소를 선택자로 사용한다.

Example

버전 명세

Modules
Module NameStatusSummary
Selectors Level 4

Last review date: 2023-2-23

지원 웹브라우저