Selectors

Editing
  • account_tree
  • bug_report

:not()

부정 가상 클래스 함수로 인수로 지정된 선택자를 부정하는 요소만 선택자로 사용이 된다.

설명

현재 다양한 선택자 리스트가 인수로 지정될 수 있으나 Selectors Level 3에서는  단일, 단순한 선택자만 인수로 허용되었다.

사용 가능한 선택자 타입

<:not()>

DEVDIC-Specified Data Types
  • Selectors Level 4DEVDIC-Specified Data Types
    <complex-selector>?:not(<complex-selector-list>) |<complex-selector>?:not(<compound-selector-list>) |<complex-selector>?:not(<simple-selector-list>) |<complex-selector>?:not(<relative-selector-list>)
    :checked를 부정하므로 체크박스 요소가 선택이 안된 경우에 선택자로 사용한다.

포함된 타입

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

  • <complex-selector-list>

    • Selectors Level 4
      <complex-selector>#
    Details

    포함된 타입

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

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

    • Selectors Level 4
      <compound-selector>#
    Details

    포함된 타입

    • <compound-selector>

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

    상대적 관계를 갖는 선택자를 나타낸다. <combinator> 타입에 의존적이다.

    • Selectors Level 4
      <combinator>? <complex-selector>
    Details

    포함된 타입

    • <combinator>

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

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

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

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

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

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

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

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

        • Selectors Level 4
          '.' <ident-token>
          class 값이 "mybox"인 요소를 선택자로 사용한다.
        Details 기능이 없다면 사용되는 타입이 동일한 타입을 사용하는 다른 항목에서 설명하거나 없는 경우이다.
        타입에 대한 자세한 설명은 다음 링크를 참조하라.[]
      • <id-selector>

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

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

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

      • Selectors Level 4
        <wq-name> | <ns-prefix>? '*'
      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>]
      • <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

버전 명세

Modules
Module NameStatusSummary
Selectors Level 4

Last review date: 2023-2-23

지원 웹브라우저