Selectors

Editing
  • account_tree
  • bug_report

Attribute presence and value selectors

요소의 애트리뷰트(attribute) 존재 자체를 이용하거나 애트리뷰트(attribute)의 값을 사용한다.

설명

속성을 이용한 선택자 패턴은 보통 앞쪽에 특정 태그 타입을 지정하거나 class 선택자를 갖는다. 속성의 영향을 많이 받는 폼(form) 요소를 선택자로 지정할 때 많이 사용된다.

사용 가능한 선택자 타입

<attribute-presence-and-value-selector>

DEVDIC-Specified Data Types
  • DEVDIC-Specified Data Types
    <attribute-presence-selector> | <attribute-value-selector>

포함된 타입

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

  • <attribute-presence-selector>

    DEVDIC-Specified Data Types

    요소가 지정된 애트리뷰트(attribute)가 선언된 모든 선택자 대상을 나타낸다.

    • '[' <wq-name> ']'
      name 애트리뷰트가 선언된 요소를 선택자로 사용한다.

      id 애트리뷰트가 선언된 요소를 선택자로 사용한다.
    Details

    포함된 타입

    • <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>]
  • <attribute-value-selector>

    DEVDIC-Specified Data Types

    요소의 지정된 애트리뷰트와 값을 <attr-matcher>에서 =, ~=, |= 수식으로만 비교하여 일치된 대상인 선택자를 나타낸다.

    자세한 내용은 <attr-macher>을 참고하라.

    • '[' <attr-substring-matching> ']'
      type 애트리뷰트의 값이 "password"인 요소를 선택자로 사용한다.

      value 애트리뷰트의 값을 공백으로 나누어 토큰 목록을 만들고 "developer."가 포함되어 있는 경우 선택자로 사용한다.

      lang 속성 값이 "en"이거나 "en" 다음에 하이픈을 가지고 있는 대상을 선택자로 사용한다.
    Details

    포함된 타입

    • <attr-substring-matching>

      DEVDIC-Specified Data Types
      • DEVDIC-Specified Data Types
        <wq-name> <attr-matcher> [ <string-token> | <ident-token> ]
      Details

      포함된 타입

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

버전 명세

Modules
Module NameStatusSummary
Selectors Level 4

Last review date: 2023-2-23

Selectors Level 3

Last review date: 2023-2-23

지원 웹브라우저