css 가상 클래스(Pseudo classes), 가상 엘리먼트(Pseudo Elements)

가상 클래스

• :active 사용자가 요소를 활성화 (예 클릭) 일치합니다.

  /* 활성화된 모든 `<a>` 태그를 선택 */
  a:active {
    color: red;
  }

  • :active 가상 클래스는 대개 <a>, <button>과 함께 사용합니다.
    다른 흔한 대상으로는 활성화된 요소를 포함한 다른 요소와
    연결된 <label>로 선택한 입력 폼 요소 등이 있습니다.
  • :active 가상 클래스로 정의한 스타일은 자신보다 뒤에 위치하고
    동등한 명시성을 가진 다른 링크 가상 클래스(:link, :hover, :visited)가 덮어씁니다. 링크를 적절히 디자인하려면 LVHA-순서(:link — :visited — :hover — :active)를 따라, :active 규칙을 다른 모든 링크 규칙들보다 뒤에 배치하세요.
  • 참고: CSS3 명세에 따르면
    다수의 버튼을 가진 마우스라도 :active 가상 클래스는 주 버튼에만 적용돼야 합니다.
    오른손잡이 마우스 기준, 주 버튼은 보통 맨 왼쪽 버튼입니다.
  • :active 가상 클래스는 사용자가 활성화한 요소(버튼 등)를 나타냅니다.
    마우스를 사용하는 경우 "활성"이란 보통 마우스 버튼을 누르는 순간부터 떼는 시점까지를 의미합니다.
• :any-link 링크의 :link와 :visited상태 모두 일치합니다.

  /* :link 또는 :visited로 일치하는 요소를 선택합니다. */
  :any-link {
    color: green;
  }

  • :any-link CSS 유사 클래스 선택기는 하이퍼링크의 소스 앵커 역할을 하는 요소를 방문 여부와 무관하게 나타낸다. 즉, href 속성을 가진 모든 <a> 또는 <area> 요소와 일치합니다. 따라서 :link 또는 :visited와 일치하는 모든 요소와 일치합니다.
• :blank 입력 값이 빈 <input>요소에 일치합니다.
• :checked 선택 상태의 라디오 버튼이나 체크 박스에 일치합니다.

  /* Matches any checked/selected radio, checkbox, or option */
  :checked {
    margin-left: 25px;
    border: 1px solid blue;
  }

  • 사용자가 요소를 체크했거나 선택한 경우 활성화되고, 체크나 선택을 해제하는 경우 비활성화됩니다.참고: 많은 경우 브라우저는 <option> 요소를 대체 요소로 취급하므로, :checked 가상 클래스를 사용한 스타일을 적용할 수 있는 범위도 브라우저마다 다릅니다.
  • :checked 가상 클래스 선택자는 선택했거나 on 상태인 라디오(<input type="radio">), 체크박스(<input type="checkbox"> (en-US)), 옵션(<option> 요소를 나타냅니다.
• :current (en-US) 현재 표시되는 요소 또는 요소의 조상과 일치합니다. WebVTT
• :default 비슷한 요소 세트에서 디폴트 인 하나 이상의 UI 요소와 일치합니다.
  • 이 선택자는HTML Standard §4.16.3 Pseudo-classes에 정의되어 있듯 <button>, <input type="checkbox"> (en-US), <input type="radio">, <option> 요소를 아래와 같은 경우에 선택합니다.
  • 옵션 요소의 기본값은 selected 특성을 가진 제일 첫 요소, 즉 DOM 순서 기준으로 제일 앞의 활성화 옵션입니다. multiple 특성의 <select>는 둘 이상의 selected 옵션을 가질 수도 있으므로, 모든 옵션이 :default로 선택됩니다.
  • <input type="checkbox">와 <input type="radio">는 checked 특성을 가지고 있으면 선택됩니다.
  • <button>은 <form> 요소의 기본 제출 버튼, 즉 DOM 순서 기준으로 양식에 속하는 제일 첫 <button>이면 선택됩니다. (image와 submit처럼, 양식을 제출하는 다른 <input> 유형에도 적용됩니다.)
• :dir 방향성 (HTML dir속성 또는 CSS direction속성 값)에 따라 요소를 선택합니다.

  /* 오른쪽에서 왼쪽으로 문자열이 있는 요소 모두 선택 */
  :dir(rtl) {
    background-color: red;
  }

  • :dir() 가상 클래스는 문자 방향의 의미적인 값, 즉 문서 자신에 설정되어 있는 것만을 사용합니다.
    스타일에 따른 문자방향, 즉 direction과 같은 CSS 속성에서 설정된 문자방향은 지원하지 않습니다.
    참고: :dir() 가상 클래스는 [dir = ...] 속성 선택기와는 동등하지 않습니다.
    
    후자는 HTML의 dir 속성을 선택하지만, 이 요소가 없는 요소는 문자 방향이 부모로부터 상속되는 경우에도 무시합니다.
    (동등하게, [dir=rtl]와 [dir=ltr]는 auto 값을 선택하지 않습니다.)
    그에 대해, dir()는 상속의 경우를 포함하며 사용자 에이전트가 계산한 값으로 선택합니다.
    참고: HTML 에서 문자방향은 dir 속성으로 지정됩니다.다른 문서 유형에서는 다른 방법이 있을지도 모릅니다.
  • dir()은 CSS의 가상 클래스로, 안에 포함된 문자열의 방향에 따라 요소를 선택합니다
• :disabled 무효 인 상태의 사용자 인터페이스 요소와 일치합니다.

  /* 모든 비활성 <input> 선택 */
  input:disabled {
    background: #ccc;
  }

  • :disabled 가상 클래스는 모든 비활성 요소를 나타냅니다. 비활성 요소란 활성(선택, 클릭, 입력 등등)하거나 포커스를 받을 수 없는 요소를 말합니다. 반대 상태인 활성 요소도 존재합니다.
• :empty 옵션의 비어 있지 않은 하위(child)를 가지지 않는 요소와 일치합니다.

  /* 내용이 없는 <div>를 선택합니다. */
  div:empty {
    background: lime;
  }

  • :empty 가상 클래스는 하위 항목이 없는 모든 요소를 나타냅니다. 하위 항목은 요소 노드 또는 텍스트(공백 포함)일 수 있습니다. 주석, 처리 지침 및 CSS 내용은 요소가 비어 있는 것으로 간주되는지 여부에 영향을 미치지 않습니다.
• :enabled 유효한 상태의 사용자 인터페이스 요소와 일치합니다.

  /* 모든 활성 <input> 선택 */
  input:enabled {
    color: blue;
  }

  • :enabled 가상 클래스는 모든 활성 요소를 나타냅니다. 활성 요소란 활성(선택, 클릭, 입력 등등)하거나 포커스를 받을 수 있는 요소를 말합니다. 반대 상태인 비활성 요소도 존재합니다.
• :first 페이지 매체 에서는 첫 번째 페이지와 일치합니다.

  /* Selects the first page when printing */
  @page :first {
    margin-left: 50%;
    margin-top: 50%;
  }

  참고: :first 가상 클래스 안에서는 CSS 속성의 사용이 제한됩니다. 바깥 여백, orphans (en-US), widows (en-US)와 페이지 넘김만 바꿀 수 있으며, 여백 지정 시 절대길이 단위만 사용할 수 있습니다. 다른 모든 속성은 무시합니다.
  • :first 가상 클래스는 @page @-규칙과 함께 사용되며, 출력 시의 첫 페이지를 나타냅니다.
• :first-child 형제 중 첫째 요소와 일치합니다.

  /* 형제들 사이에서 첫 번째 요소인 <p>를 선택합니다. */
  p:first-child {
    color: lime;
  }

  참고: 초기 정의에서는 부모가 있는 요소만 선택할 수 있었습니다. Selectors Level 4부터는 이 제한이 사라졌습니다.
  • :first-child 가상 클래스는 형제 요소 중 제일 첫 요소를 나타냅니다.
• :first-of-type 형제 중 첫째로 특정 유형의 요소와 일치합니다.

  /* Selects any <p> that is the first element
    of its type among its siblings */
  p:first-of-type {
    color: red;
  }

  참고: 초기 정의에서는 부모가 있는 요소만 선택할 수 있었습니다. Selectors Level 4부터는 이 제한이 사라졌습니다.
  • :first-of-type 가상 클래스는 형제 요소 중 자신의 유형과 일치하는 제일 첫 요소를 나타냅니다.
• :focus 요소에 포커스가있을 때와 일치합니다.

  /* 포커스된 임의의 <p> 요소를 선택합니다. */
  input:focus {
    color: red;
  }

  참고: :focus는 포커스를 받은 요소 자체에만 해당합니다. 자손이 포커스를 받았을 때의 요소를 선택해야 하면 :focus-within을 사용하세요.
  • :focus 가상 클래스는 양식의 입력 칸 등 포커스를 받은 요소를 나타냅니다. 보통 사용자가 요소를 클릭 또는 탭하거나, 키보드 Tab 키로 선택했을 때 발동합니다.
• :focus-visible 요소에 포커스가 있고 그 초점이 사용자에게 표시되는 경우와 일치합니다.
  • :focus-visible 가상 클래스는 요소가 :focus 가상 클래스와 일치할 때 적용되며 UA(사용자 에이전트)는 휴리스틱을 통해 요소에 포커스가 분명하게 표시되어야 한다고 결정합니다. (이 경우 많은 브라우저가 기본적으로 "focus ring"을 표시합니다.)
  • 이 선택기는 사용자의 입력 양식(마우스 대 키보드)에 따라 다른 포커스 표시기를 제공하는 데 유용합니다.
• :focus-within 포커스를 가지는 요소와 포커스를 가지는 자식을 가진 요소와 일치합니다.

  /* Selects a <div> when one of its descendants is focused */
  div:focus-within {
    background: cyan;
  }

  • 흔히 쓸 수 있는 예시로서, <form>의 <input> 필드 중 하나가 포커스된 경우 전체 <form>을 강조해야 할 때 유용하게 사용할 수 있습니다.
• :focus-within 가상 클래스는 포커스를 받았거나, 포커스를 받은 요소를 포함하는 요소를 나타냅니다. 즉 스스로 :focus 가상 클래스와 일치하거나, 그 자손 중 하나가 :focus와 일치하는 요소를 나타냅니다. (섀도 트리 내부도 포함)
• :future (en-US) 현재 요소 뒤에 요소와 일치합니다. WebVTT
• :hover 사용자가 요소 위에 커서를 놓으면와 일치합니다.

  /* "호버링" 중인 <a> 요소 선택 */
  a:hover {
    color: orange;
  }

  • :hover 가상 클래스로 정의한 스타일은 자신보다 뒤에 위치하고 동등한 명시성을 가진 다른 링크 가상 클래스(:link, :visited, :active)가 덮어씁니다. 링크를 적절히 디자인하려면 LVHA-순서(:link — :visited — :hover — :active)를 따라, :hover 규칙을 :link와 :visited 뒤, :active 앞에 배치하세요.
  • 참고: :hover 가상 클래스는 터치스크린에서 문제가 많습니다.
    브라우저에 따라서 :hover를 절대 활성화하지 않을 수도 있지만,
    요소를 터치한 직후에만, 아니면 터치한 이후 다른 요소를 다시 터치하기 전까지 계속 활성화할 수도 있습니다.
    웹 개발자는 호버링이 제한적이거나 아예 불가능한 장치에서도 콘텐츠에 접근할 수 있도록 개발해야 합니다.
  • :hover 가상 클래스는 사용자가 포인팅 장치를 사용해 상호작용 중인 요소를 선택합니다. 보통 사용자의 커서(마우스 포인터)가 요소 위에 올라가 있으면 선택됩니다.
• :indeterminate 값이 불확정 한 상태의 UI 요소 일반적으로 확인란에 일치 합니다.

  /* 지정된 값 및 값이 해당 범위 내에 있는 경우에만 `<input>`을 선택합니다. */
  input:indeterminate {
    background: lime;
  }

  • 이 선택기의 대상이되는 요소는 다음과 같습니다.
    • <input type="checkbox">요소에서 JavaScript 에 의해 indeterminate속성이 true설정되어있는 경우
    • <input type="radio">요소에서 양식에서 동일한 name값을 가진 모든 라디오 버튼이 선택되지 않음 인 경우
    • <progress> 요소에서 중간 상태의 경우
  • :indeterminate는 가상 클래스 선택자에서 미확정 상태에있는 양식 요소를 나타냅니다. 예를 들어 체크 박스에서 HTML의 indeterminate속성 true에 설정된 것, 라디오 버튼 그룹이 모두 선택되어 있지 않은 것, <progress>요소에서 중간 상태 등입니다.
• :in-range 범위 제한을 가지는 요소에서 요소의 값이 범위 내에있는 경우에 일치합니다.

  /* Selects any <input>, but only when it has a range
   specified, and its value is inside that range */
  input:in-range {
    background-color: rgba(0, 255, 0, 0.25);
  }

  • 이 가상 클래스는 사용자에게 필드의 현재 값이 허용 한계 내에 있음을 시각적으로 표시하는 데 유용합니다.참고: 이 가상 클래스는 범위 제한이 있는 요소에만 적용됩니다. 이러한 제한이 없는 경우 요소는 "in-range" 또는 "out-of-range"이 될 수 없습니다.
  • :in-range 유사 클래스는 현재 값이 최소 및 최대 특성에 지정된 범위 한계 내에 있는 <input> 요소를 나타냅니다.
• :invalid 무효 인 상태의 <input>같은 요소와 일치합니다.

  /* invalid <input> 요소 선택 */
  input:invalid {
    background-color: pink;
  }

  • :invalid 유사 클래스는 내용의 유효성을 검사하지 못하는 모든 <input> 또는 기타 <form> 요소를 나타냅니다.
• :lang 언어 (HTML lang 속성의 값)에 따라 요소를 일치 합니다.

  /* English (en) 내 <p> 요소 선택 */
  p:lang(en) {
    quotes: '\201C' '\201D' '\2018' '\2019';
  }
  :lang(fr) > q { quotes: '« ' ' »'; }
  :lang(de) > q { quotes: '»' '«' '\2039' '\203A'; }

  • 참고 : HTML에서 언어는 랭 속성인 <meta> 요소의 조합과 프로토콜 (HTTP 헤더 등)의 정보에 의해 결정됩니다.
    다른 문서 유형에 대해 언어를 결정하는 다른 문서 방법이 있을 수 있다.
  • :lang() 유사 클래스는 요소가 포함된 것으로 확인된 언어에 따라 요소를 일치시킵니다.
• :last-child 형제 중 마지막에있는 요소와 일치합니다.

  /* 형제들 사이에서 마지막 요소인 <p>를 선택. */
  p:last-child {
    color: lime;
  }

  • 참고: 원래 정의된 대로 선택한 요소에는 상위 요소가 있어야 했습니다. 선택기 레벨 4부터는 더 이상 필요하지 않습니다.
  • :last-child 가상 클래스는 형제 요소 그룹 중 마지막 요소를 나타냅니다.
• :last-of-type 형제 중 마지막에있는 특정 유형의 요소와 일치합니다.

  /* 형제들 사이에서 그 유형의 마지막 요소인 <p>를 선택합니다. */
  p:last-of-type {
    color: lime;
  }

  • 참고: 원래 정의된 대로 선택한 요소에는 상위 요소가 있어야 했습니다. 선택기 레벨 4부터는 더 이상 필요하지 않습니다.
  • :last-of-type 가상 클래스는 형제 요소 그룹 중 해당 유형의 마지막 요소를 나타냅니다.
• :left 페이지 매체 는 왼쪽 페이지와 일치합니다.

  /* 인쇄할 때 왼쪽 페이지를 선택. */
  @page :left {
    margin: 2in 3in;
  }

  • 주어진 페이지가 "왼쪽"인지 "오른쪽"인지는 문서의 주요 쓰기 방향에 따라 결정됩니다.
    예를 들어, 첫 번째 페이지의 주 쓰기 방향이 왼쪽에서 오른쪽 이면 :right 페이지 이고,
    오른쪽에서 왼쪽이면 :left 페이지가 됩니다.
  • 참고: 이 가상 클래스는 페이지 상자의 여백, 패딩, 테두리 및 배경 속성만 변경하는 데 사용할 수 있습니다.
    다른 모든 속성은 무시되고 페이지의 문서 내용이 아닌 페이지 상자만 영향을 받습니다.
  • :left 가상 클래스는 @page at-rule과 함께 사용되어 인쇄된 문서의 모든 왼쪽 페이지를 나타냅니다.
• :link 방문하지 않은 링크와 일치합니다.

  /* 아직 방문하지 않은 <a> 요소를 선택 */
  a:link {
    color: red;
  }

  • :link 가상 클래스로 정의한 스타일은 자신보다 뒤에 위치하고
    동등한 명시성을 가진 다른 링크 가상 클래스(:active, :hover, :visited)가 덮어씁니다.
    링크를 적절히 디자인하려면 LVHA-순서(:link — :visited — :hover — :active)를 따라,
    :active 규칙을 다른 모든 링크 규칙들보다 앞에 배치하세요.
  • 참고: 방문 여부에 상관하지 않고 요소를 선택하려면 :any-link를 사용하세요.
  • :link 가상 클래스는 아직 방문하지 않은 요소를 나타냅니다.
    href 속성을 가진 , , 중 방문하지 않은 모든 요소를 선택합니다.
• :local-link (en-US) 현재 문서와 동일한 사이트에있는 페이지를 가리키는 링크에 일치합니다.
• :is() 전달 된 선택기 목록에있는 선택기에 일치합니다.
  • :is() (:matches(), :any())참고:
:matches()는 CSSWG 문제 #3258에서 이름이 :is()로 변경되었습니다.
  • :is() 가상 클래스 함수는 선택기 목록을 인수로 사용하고,
    해당 목록의 선택기 중 하나가 선택할 수 있는 요소를 선택합니다.
    이것은 보다 간결한 형태로 큰 선택기를 작성하는 데 유용합니다.

  /* header, main, footer 내 <p> 요소를 선택합니다. */
  :is(header, main, footer) p:hover { color: red; cursor: pointer; }
  /* 위의 내용은 다음과 같습니다 */
  header p:hover,
  main p:hover,
  footer p:hover {
  color: red;
  cursor: pointer;
  }​

  
  
  • :is()와 :where()의 차이점
    • 둘 사이의 차이는 :is()가 전체 선택기의 특이성에 대해 계수하는 반면 (가장 구체적인 인수의 특이성을 취함)
    • :where()는 특이성 값이 0이다. 이는 :where() 참조 페이지의 예제를 통해 확인 할 수 있습니다.
  • Forgiving Selector Parsing(관대한 선택기 구문 분석)
    • 사양은 :is() 및 :where()를 관대한 선택자 목록을 수락하는 것으로 정의합니다.
    • 선택기 목록을 사용할 때 CSS에서 선택기 중 하나라도 유효하지 않으면 전체 목록이 유효하지 않은 것으로 간주됩니다. 구문 분석 실패 시 전체 선택기 목록이 유효하지 않은 것으로 간주되는 대신 :is() 또는 :where()를 사용할 때 잘못되었거나 지원되지 않는 선택기가 무시되고 다른 선택기가 사용됩니다.

      :is(:valid, :unsupported) {
      ...
      }

      :unsupported를 지원하지 않는 브라우저에서도 올바르게 구문 분석하고 :valid와 일치하지만, 반면:

        :valid, :unsupported {
      ...
      }

      :valid를 지원하더라도 지원하지 않는 브라우저에서는 무시됩니다.
  • `Pseudo-elements`는 `:is()`에 대한 선택기 목록에서 유효하지 않습니다.
  • 이전 브라우저는 이전 버전의 Chrome, Firefox 및 Safari를 포함하여 이전 접두사 가상 클래스를 통해 이 기능을 지원합니다.
    `:any`는 벤더 접두사가 필요하고 복잡한 선택기를 지원하지 않는다는 점을 제외하면 `:sen`/`:is()`와 정확히 같은 방식으로 작동합니다.
  • 이러한 레거시 가상 클래스를 사용하여 이전 버전과의 호환성을 제공할 수 있습니다.

    /*
     * -any() 및 :matches()가 있는 하위 호환 버전 
     * (선택자를 단일 규칙으로 그룹화하는 것은 불가능합니다. 
     *  유효하지 않은 선택기가 있으면 전체 규칙이 무효화되기 때문입니다.) 
     */
    :-webkit-any(header, main, footer) p:hover {
      color: red;
      cursor: pointer;
    }
    :-moz-any(header, main, footer) p:hover {
      color: red; 
      cursor: pointer;
    }
    :matches(header, main, footer) p:hover {
      color: red;
      cursor: pointer;
    }​

• :not 이 선택기 값으로 전달되는 선택기 일치하지 않는 것과 일치합니다.주의:
  • 쓸모없는 선택자는 이 가상 클래스를 사용하여 작성될 수 있습니다.
    예를 들어, :not(*)은 임의 요소가 아닌 모든 요소와 일치합니다. 그래서 규칙이 결코 적용되지 않습니다.
  • 다른 규칙을 다시 작성할 수 있습니다.
    가령 foo:not(bar)는 간단한 foo와 같은 요소와 일치합니다. 그럼에도 불구하고 첫 요소의 명시도가 더 높습니다.
  • :not(foo){}는 <html> 및 <body> 포함 뭐든지 foo가 아닌 것과 일치합니다.
  • 이 선택자는 한 요소에만 적용됩니다. 따라서 모든 조상(ancestor)을 제외하는 데 사용할 수 없습니다.
    예를 들어, body :not(table) a는 <tr> 요소가 선택자의 :not() 부분과 일치하기 때문에, 여전히 표 내부 링크에 적용됩니다.
  • 부정(negation) 가상 클래스 :not(X)는 인수로 간단한 선택자(selector) X를 취하는 기능 표기법입니다.
    인수로 표시되지 않은 요소와 일치합니다. X는 다른 부정 선택자를 포함해서는 안 됩니다.
• :nth-​​child 형제 목록의 요소와 일치합니다
  • 형제 an + b 형식의 식에 일치합니다
    (예를 들어, 2n + 1은 1,3,5,7 번째 등의 요소와 일치합니다. 모든 홀수입니다 ).
• :nth-​​of-type 특정 유형의 형제 ( <p>요소 등) 목록의 요소와 일치합니다
  • 형제는 , an + b 형식의 식에 일치합니다.
    (예를 들어, 2n + 1은 그 요소의 유형 1,3,5 7 번째 등과 일치합니다. 모든 홀수입니다.)
• :nth-​​last-child 형제 목록의 요소를 끝에서부터 거꾸로 세어 일치시킵니다.
  • 형제는 an + b 형식의 식에 일치합니다
    (예를 들어, 2n + 1은 시퀀스의 마지막 요소 다음 그 앞의 두 요소 다음 그 앞의 두 요소 등과 일치합니다.
    마지막 부터 시작하여 모든 홀수 요소)
• :nth-​​last-of-type 특정 유형의 형제의 목록 ( <p>요소 등)의 요소를 마지막으로 거꾸로 세어 일치시킵니다.
  • 형제는 , an + b 형식의 식에 일치합니다.
    (예를 들어, 2n + 1은 시퀀스에서 해당 유형의 마지막 요소 다음 그 앞의 두 요소 다음 그 앞의 두 요소 등 과 일치합니다.
    마지막으로 세어 홀수 요소)
• :only-child 형제가없는 요소와 일치합니다.

  /* 부모의 유일한 자식인 경우에만 각 <p>를 선택합니다. */
  p:only-child {
    background-color: lime;
  }

   
  •  참고: 원래 정의된 대로 선택한 요소에는 상위 요소가 있어야 했습니다.
    선택기 레벨 4부터는 더 이상 필요하지 않습니다.
  • :only-child 가상 클래스는 형제가 없는 요소를 나타냅니다.
    이것은 :first-child:last-child
    또는 :nth-child(1):nth-last-child(1) 와 동일하지만 특정성이 더 낮습니다.
• :only-of-type 형제간에 그 유형의 유일한 요소 인 요소와 일치합니다.

  /* 부모 내부의 유일한 <p> 요소인 경우에만 각 <p>를 선택합니다. */
  p:only-of-type {
    background-color: lime;
  }

  • 참고: 원래 정의된 대로 선택한 요소에는 상위 요소가 있어야 했습니다.
    선택기 레벨 4부터는 더 이상 필요하지 않습니다.
  • :only-of-type 가상 클래스는 동일한 유형의 형제가 없는 요소를 나타냅니다.
• :optional 불필요한 양식 요소와 일치합니다.

  /* 선택적 <input>을 선택합니다. */
  input:optional {
    border: 1px dashed black;
  }

  • 이 가상 클래스는 양식을 제출하는 데 필요하지 않은 필드의 스타일을 지정하는 데 유용합니다.
    참고: :required 가상 클래스는 필수 양식 필드를 선택합니다.
• :optional 가상 클래스는 필수 속성이 설정되지 않은 <input>, <select> 또는 <textarea> 요소를 나타냅니다.
• :out-of-range 범위 제한을 가지는 요소에서 요소의 값이 범위 외에있는 경우에 일치합니다.

  /* 범위가 있는 경우 지정된 값이며 해당 값이 해당 범위를 벗어난 경우에만 <input>을 선택합니다. */
  input:out-of-range {
    background-color: rgba(255, 0, 0, 0.25);
  }

  • 이 가상 클래스는 필드의 현재 값이 허용된 한계를 벗어난 입력(input) 요소를 선택합니다.
  • 참고: 이 가상 클래스는 범위 제한이 있고 취할 수 있는 요소에만 적용됩니다.
    이러한 제한이 없는 경우 요소는 "in-range" 또는 "out-of-range"가 될 수 없습니다.
    나는 시각적 표시를 사용자에게 제공하는 데 유용합니다.
  • :out-of-range 가상 클래스는 현재 값이
    min 및 max 속성으로 지정된 범위 제한을 벗어나는 <input> 요소를 나타냅니다.
• :past (en-US) 현재 요소 이전의 요소와 일치합니다. WebTT
• :placeholder-shown 개체 틀 텍스트를 표시하고있는 input 요소와 일치합니다.

  /* 활성 자리 표시자가 있는 요소를 선택합니다. */
  :placeholder-shown {
    border: 2px solid silver;
  }

  • :placeholder-shown 가상 클래스는 현재 자리 표시자 텍스트를 표시하는 모든 <input> 또는 <textarea> 요소를 나타냅니다.
• :playing (en-US) "재생"또는 "일시 중지"할 수있는 오디오, 비디오 또는 유사한 자원을 나타내는 요소가 '재생 중'때 일치합니다.
• :paused (en-US) "재생"또는 "일시 중지"할 수있는 오디오, 비디오 또는 유사한 자원을 나타내는 요소가 "일시 정지"되는 경우와 일치합니다.
• :read-only 사용자가 변경할 수없는 요소와 일치합니다.

  input:read-only, textarea:read-only {
    background-color: #ccc;
  }
  
  p:read-only {
    background-color: #ccc;
  }

  • 읽기 전용/읽기-쓰기 컨트롤에서 양식 정보 확인
    • 읽기 전용 양식 컨트롤을 사용하는 한 가지 방법은 사용자가 이전 양식(예: 배송 세부 정보)으로 입력했을 수 있는 정보를 확인하고 확인하는 동시에 나머지 양식과 함께 정보를 제출할 수 있도록 하는 것입니다. 아래 예제에서 이 작업을 수행합니다.
    • :read-only 가상 클래스는 입력이 클릭 가능한 필드처럼 보이게 하는 모든 스타일을 제거하는 데 사용되며, 입력이 읽기 전용 문단처럼 보이게 합니다. 반면 :read-write 유사 클래스는 편집 가능한 <textarea>에 더 나은 스타일을 제공하는 데 사용됩니다.

      input:-moz-read-only, 
      textarea:-moz-read-only,
      input:read-only, 
      textarea:read-only {
        border: 0;
        box-shadow: none;
        background-color: white;
      }
      textarea:-moz-read-write,
      textarea:read-write {
        box-shadow: inset 1px 1px 3px #ccc;
        border-radius: 5px;
      }

      전체 소스코드
  • 읽기 전용 비양식 컨트롤 스타일 지정
    • 이 선택기는 <input>/<textarea> 요소만 선택하는 것이 아니라
      사용자가 편집할 수 없는 요소를 선택합니다.

      p {
        font-size: 150%;
        padding: 5px;
        border-radius: 5px;
      }
      p:read-only {
        background-color: red;
        color: white;
      }
      p:read-write {
        background-color: lime;
      }

  • :read-only 가상 클래스는 사용자가 수정할 수 없는 요소(예: input 또는 textarea)를 나타냅니다.
• :read-write 사용자가 변경할 수있는 요소와 일치합니다.

  input:read-write, 
  textarea:read-write {
    background-color: #bbf;
  }
  
  p:read-write {
    background-color: #bbf;
  }

  • :read-write 가상 클래스는 사용자가 편집할 수 있는 요소(예: 입력 또는 텍스트 영역)를 나타냅니다.
• :required 필요한 양식 요소와 일치합니다.

  /* required <input>을 선택합니다. */
  input:required {
    border: 1px dashed red;
  }

  • 이 가상 클래스는 양식을 제출하기 전에 유효한 데이터가 있어야 하는 필드를 강조 표시하는 데 유용합니다.
  • :required 가상 클래스는 필수 속성이 설정된 모든 <input>, <select> 또는 <textarea> 요소를 나타냅니다.
• :right 페이지 매체 는 오른쪽 페이지에 일치합니다.
  • @page at-rule과 함께 사용되는 :right 가상 클래스는 인쇄된 문서의 모든 오른쪽 페이지를 나타냅니다.
• :root 문서의 루트 인 요소와 일치합니다.

  /* 문서의 루트 요소 선택, HTML에서는 <html> */
  :root {
    background: yellow;
  }

  • 전역 CSS 변수 선언하기
    :root는 전역 CSS 변수 선언에 유용하게 사용할 수 있습니다.

    :root {
    --main-color: hotpink;
    --pane-padding: 5px 42px;
    }

  • :root 가상 클래스는 문서 트리의 루트 요소를 선택합니다.
    HTML의 루트 요소는 <html> 요소이므로,
    :root의 명시도가 더 낮다는 점을 제외하면 html 선택자와 똑같습니다.
• :scope 범위 요소 인 모든 요소와 일치합니다.

  /* 범위가 지정된 요소를 선택. */
  :scope {
    background-color: lime;
  }

  • 현재 스타일시트에서 사용되는 :scope는 :root와 동일하며,
    현재로서는 범위 요소를 명시적으로 설정할 방법이 없기 때문입니다.
    querySelector(), querySelectorAll(), match() 또는 Element.closest()와 같은
    DOM API에서 사용할 경우 :scope는 메서드가 호출된 요소와 일치합니다.
    • Identity match
      • 이 간단한 예에서 Element.matches() 메서드의
        :scope 가상 클래스를 사용하면 호출된 요소와 일치함을 보여줍니다.

      • <p id="para">
        This is a paragraph. It is not an interesting paragraph. Sorry about that.
        </p>
        <p id="output"></p>​​

        
        

        let paragraph = document.getElementById("para");
        let output = document.getElementById("output");
        
        if (paragraph.matches(":scope")) {
          output.innerText = "Yep, the element is its own scope as expected!";
        }

    • Direct children
      • :scope 가상 클래스가 유용한 것으로 입증된 상황은 이미 검색된 요소의 직계 자손을 가져와야 할 때입니다.

        var context = document.getElementById('context');
        var selected = context.querySelectorAll(':scope > div');
        
        document.getElementById('results').innerHTML = 
        	Array.prototype.map.call(selected, function (element) {}).join(', ');

      • <div id="context"> 
          <div id="element-1">
            <div id="element-1.1"></div>
            <div id="element-1.2"></div>
          </div>
          <div id="element-2">
            <div id="element-2.1"></div>
          </div>
        </div>
        <p> Selected elements ids : <span id="results"></span> </p>

    • :scope 가상 클래스는 선택자가 일치시킬 기준점인 요소를 나타냅니다.
• :valid <input> 요소 등 요소가 유효한 상태에서 일치합니다.

  /* Selects any valid <input> */
  input:valid {
    background-color: powderblue;
  }

  • 이 가상 클래스는 사용자의 올바른 필드를 강조 표시하는 데 유용합니다.
  • Indicating valid and invalid form fields(유효한 양식 필드 및 잘못된 양식 필드 표시)
    • 이 예에서는 콘텐츠를 생성하기 위한 추가 <span>을 포함하는 이와 같은 구조를 사용합니다.
      valid/invlaid 데이터의 지표를 제공하기 위해 이것을 사용할 것입니다:

      <div>
        <label for="fname">First name *: </label>
        <input id="fname" name="fname" type="text" required>
        <span></span>
      </div>

      input + span {
        position: relative;
      }
      input + span::before {
        position: absolute;
        right: -20px;
        top: 5px;
      }
      input:invalid + span::before {
        content: '✖';
        color: red;
      }

    • 생성된 콘텐츠를 상대적으로 배치할 수 있도록 여러개의 <span>를 position: relative로 설정합니다.
      그런 다음 양식 데이터가 유효한지 유효하지 않은지 여부에 따라
      생성된 다른 콘텐츠(각각 녹색 확인 또는 적십자)를 절대적으로 배치한다.
      잘못된 데이터에 긴급성을 더하기 위해 잘못된 경우 입력에 두꺼운 빨간색 테두리를 지정했습니다.
      참고: "required" 레이블에 대해 ::after를 이미 사용하고 있었기 때문에 이러한 레이블을 추가하기 위해 ::before를 사용했습니다.
    • 필요한 텍스트 입력은 비어 있을 때는 유효하지 않지만 채워진 내용이 있을 때는 유효합니다.
      반면 전자 메일 입력은 필수 항목이 아니므로 비어 있으면 유효하지만
      올바른 전자 메일 주소가 아닌 항목이 포함된 경우에는 유효하지 않습니다.

      input:valid + span::before {
        content: '✓';
        color: green;
      }
      input:invalid {
        border: 2px solid red;
      }​

  • Accessibility concerns 접근성 문제
    • 녹색은 일반적으로 유효한 입력을 나타내는 데 사용됩니다.
      특정 유형의 색맹을 가진 사람들은 의미를 전달하기 위해 색에 의존하지 않는 추가 지표를 동반하지 않는 한
      입력의 상태를 결정할 수 없을 것이다.
      일반적으로 설명 텍스트 및/또는 아이콘이 사용됩니다.
  • :valid 가상 클래스는 내용의 유효성을 성공적으로 검사하는 모든 <input> 또는
    기타 <form> 요소를 나타냅니다.
    이렇게 하면 유효한 필드에 데이터가 올바르게 포맷되었는지 확인하는 데
    도움이 되는 모양을 쉽게 적용할 수 있습니다.
• :target 현재 URL의 대상이면 (즉, 현재URL 단편일치하는 ID를 가지는 경우), 요소와 일치있습니다.

  /* 현재 URL의 조각과 일치하는 ID를 가진 요소를 선택. */
  :target {
    border: 2px solid black;
  }

  • 예를 들어 다음 URL에는 section2라는 요소를 가리키는 조각(# 기호로 표시)이 있습니다.
    http://www.example.com/index.html#section2
  • 다음 요소는 현재 URL이 위와 같을 때 :target 선택기에 의해 선택됩니다.
    <section id="section2">Example</section>
    • #p1 선택 확인
    • #p2 선택 확인
  • :target 가상 클래스는 URL의 조각과 일치하는 ID를 가진 고유한 요소(대상 요소)를 나타냅니다.
• :visited 방문한 링크에 일치합니다.

  /* 방문한 적이 있는 <a> 선택 */
  a:visited {
    color: green;
  }

   
  • :visited 가상 클래스로 정의한 스타일은 자신보다 뒤에 위치하고
    동등한 명시성을 가진 다른 링크 가상 클래스(:link, :hover, :active)가 덮어씁니다.
    링크를 적절히 디자인하려면 LVHA-순서(:link — :visited — :hover — :active)를 따라
    :visited 규칙을 :link 뒤, :hover와 :active 앞에 배치하세요.
  • 스타일 제한
    • 브라우저는 개인정보 보호를 위해 :visited에서 사용할 수 있는 스타일을 엄격히 제한하고 있습니다.
      • 사용 가능한 CSS 속성은 color, background-color, border-color, border-bottom-color, border-left-color, border-right-color, border-top-color, column-rule-color (en-US), outline-color (en-US)입니다.
      • 사용 가능한 SVG 속성은 fill (en-US)과 stroke (en-US)입니다.
      • 허용 가능한 속성의 알파 채널 값은 무시하고
        대신 :visited가 아닐 때의 알파 채널을 사용합니다.
        단, 그 값이 0일 땐 :visited의 스타일을 모두 무시합니다.
      • 사용자 입장에서는 방문한 링크의 색이 바뀐 것처럼 보일 때도
window.getComputedStyle() 메서드는 거짓으로라도 항상 :visited가 아닐 때의 스타일을 반환합니다.
      • 참고: 스타일 제한에 관한 더 많은 정보와 이유에 대해서는
        개인정보와 :visited 선택자 (en-US) 문서를 참고하세요.
  • :visited 가상 클래스는 사용자가 방문한 적이 있는 링크를 나타냅니다.
    :visited가 바꿀 수 있는 스타일은 개인정보 보호를 위해 매우 제한적입니다.

GitHub - mdn/learning-area: Github repo for the MDN Learning Area.

가상 엘레멘트

• ::after 원래 요소의 실제 내용 뒤에 나타나는 스타일 가능한 요소와 일치합니다.

  /* 링크 뒤에 화살표 추가 */
  a::after {
    content: "→";
  }
  
  /* CSS3 syntax */
  ::after {}
  
  /* CSS2 syntax */
  :after {}

  • 참고: ::before와 ::after로 생성한 가상 엘리먼트(요소)는 원본 요소의 서식 박스에 포함되므로,
    <img>나 <br> 등 대체 요소에 적용할 수 없습니다.
  • 툴팁
    • 다음 예제는 ::after와 함께 CSS attr() (en-US) 표현식, data-descr 사용자 설정 데이터 속성을 사용해 툴팁을 구현합니다.
    • tabindex="0"을 추가해
      각 span에 포커스가 갈 수 있도록 지정한 후,
      CSS :focus 선택자를 추가하여 키보드 사용자도 지원할 수 있습니다.
    • 예제를 통해 ::before와 ::after가 얼마나 유연한지 확인할 수 있지만,
      가장 접근성이 뛰어난 구현을 위해서라면 요약과 세부 요소처럼 의미를 담은 요소를 활용하는 편이 좋습니다.

      <p>이 예제는
        <span tabindex="0" data-descr="단어와 문장 부호의 집합">텍스트</span>와 함께 약간의
        <span tabindex="0" data-descr="호버 시 보여지는 작은 팝업">툴팁</span>을 포함합니다.
      </p>

      span[data-descr] {
        position: relative;
        text-decoration: underline;
        color: #00F;
        cursor: help;
      }
      span[data-descr]:hover::after,
      span[data-descr]:focus::after {
        content: attr(data-descr);
        position: absolute;
        left: 0;
        top: 24px;
        min-width: 200px;
        border: 1px #aaaaaa solid;
        border-radius: 10px;
        background-color: #ffffcc;
        padding: 12px;
        color: #000000;
        font-size: 14px;
        z-index: 1;
      }

  • 참고: 의사 클래스와 가상 엘리먼트(요소)를 구분하기 위해 CSS3부터 ::after 구문을 도입했습니다.
    그러나 브라우저는 CSS2 구문인 :after도 허용합니다.
  • ::after는 선택한 요소의 맨 마지막 자식으로 가상 엘리먼트(요소)를 하나 생성합니다.
    보통 content 속성과 함께 짝지어, 요소에 장식용 콘텐츠를 추가할 때 사용합니다.
    기본값은 인라인입니다.
• ::before 원래 요소의 실제 내용 앞에 나타나는 스타일 가능한 요소와 일치합니다.

  /* 링크 앞에 하트 추가 */
  a::after {
    content: "♥";
  }

  • CSS에서, ::before는 선택한 요소의 첫 자식으로 가상 엘리먼트(요소)를 하나 생성합니다.
    보통 content 속성과 함께 짝지어, 요소에 장식용 콘텐츠를 추가할 때 사용합니다.
    기본값은 인라인입니다.
• ::first-letter 요소의 첫 번째 문자와 일치합니다.

  /* <p>의 첫 글자를 선택합니다. */
  p::first-letter {
    font-size: 130%;
  }

  • 요소의 첫 글자가 항상 식별하기 쉬운 것은 아닙니다.
    • 첫 번째 문자 앞이나 바로 뒤에 오는 구두점은 일치 항목에 포함됩니다.
      구두점에는 열기(Ps), 닫기(Pe), 초기 인용부호(Pi), 최종 인용부호(Pf) 및 기타 구두점(Po) 클래스에 정의된 모든 유니코드 문자가 포함됩니다.
    • 일부 언어에는 네덜란드어의 IJ와 같이 항상 대문자로 표시되는 이중 문자가 있습니다.
      이러한 경우, 이중 문자의 두 문자는 ::first-letter 가상 엘리먼트(요소)와 일치해야 합니다.
    • ::before pseudo-element와 content 속성의 조합은 요소의 시작 부분에 일부 텍스트를 삽입할 수 있습니다.
      이 경우 ::first-letter는 생성된 콘텐츠의 첫 글자와 일치합니다.
    • 참고: CSS3는 유사 클래스와 유사 요소를 구별하기 위해 ::first-letter 표기법(콜론 2개 포함)을 도입했습니다.
      브라우저는 또한 CSS2에 도입된 첫 번째 문자를 허용합니다.
      네덜란드어로 IJ와 같은 이중문자에 대한 브라우저 지원은 미흡하다.
      지원의 현재 상태를 보려면 호환성 표를 확인하십시오.
  • ::first-letter 가상 엘리먼트(요소)는 블록 수준 요소의 첫 번째 줄 첫 글자에 스타일을 적용하지만
    다른 콘텐츠(예: 이미지 또는 인라인 테이블)가 선행되지 않는 경우에만 스타일을 적용합니다.
• ::first-line 포함하는 요소의 첫 번째 행과 일치합니다.

  /* <p>의 첫 번째 줄을 선택합니다. */
  p::first-line {
    color: red;
  }
  

  • 참고: CSS3에서는 가상 엘리먼트(요소)와 의사 클래스를 구별하기 위해
    ::first-line 표기법(콜론 2개 포함)을 도입했습니다.
    브라우저는 CSS2에 도입된 :first-line도 허용합니다.
  • ::first-line CSS 유사 요소는 블록 수준 요소의 첫 번째 줄에 스타일을 적용합니다.
    첫 번째 줄의 길이는 요소의 너비, 문서의 너비 및 텍스트의 글꼴 크기를 포함한 여러 요인에 따라 달라집니다.
• ::grammar-error 브라우저에서 플래그가 문법 오류를 포함하는 문서의 일부와 - 일치합니다.
• ::marker 일반적으로 글 머리 기호 또는 번호가 포함되어있는 목록 항목의 마- 커 상자와 일치합니다.

  ::marker {
    color: blue;
    font-size: 1.2em;
  }

  • Allowable properties 허용되는 속성
    • ::marker를 선택기로 사용하는 규칙에서는 특정 CSS 속성만 사용할 수 있습니다.
      • 모든 글꼴 속성
      • 공백 속성
      • 색상
      • text-combine-upright, unicode-bidi and direction 속성
      • content(콘텐츠) 속성
      • 모든 애니메이션(Animations) 및 전환(Transitions) 속성
      • 참고: 사양에는 향후 추가 CSS 속성이 지원될 수 있다고 명시되어 있습니다.
  • ::marker 가상 엘리먼트(요소)는 일반적으로 글머리 기호 또는 숫자가 포함된 목록 항목의 마커 상자를 선택합니다.
  • <li> 및 <summary> 요소와 같은 목록 항목을 표시하도록 설정된 모든 요소
    또는 가상 엘리먼트(요소)에서 작동합니다.
• ::selection 선택된 문서의 부분에 일치합니다.

  ::selection {
    background-color: cyan;
  }

  • 특정 CSS 속성만 ::selection과 함께 사용할 수 있습니다.
    • color
    • background-color
    • text-decoration and its associated properties
    • text-shadow
    • stroke-color, fill-color and stroke-width특히 background-image는 무시됩니다.
• ::selection 가상 엘리먼트(요소)는 사용자가 강조 표시한 문서 부분에 스타일을 적용합니다
  (예: 텍스트에서 마우스를 클릭하고 끌기).
• ::spelling-error 브라우저에서 플래그가 붙은 맞춤법 오류를 포함하는 문서의 일부와 일치합니다.