유사 클래스

이메일 가입 양식이 있고 이메일 양식 필드에 잘못된 이메일 주소가 포함된 경우 빨간색 테두리가 표시되도록 하려면 어떻게 해야 하나요? 그 방법은 무엇일까요? 브라우저에서 제공하는 여러 가상 클래스 중 하나인 :invalid CSS 가상 클래스를 사용할 수 있습니다.

가상 클래스를 사용하면 상태 변경 및 외부 요인에 따라 스타일을 적용할 수 있습니다. 즉, 디자인이 잘못된 이메일 주소와 같은 사용자 입력에 반응할 수 있습니다. 이러한 선택기는 선택자 모듈에서 다루며 이 모듈에서는 선택기에 대해 자세히 설명합니다.

이전 모듈에서 자세히 알아볼 수 있는 가상 요소와 달리 가상 클래스는 요소의 일부에 일반적으로 스타일을 지정하는 대신 요소가 있을 수 있는 특정 상태에 연결됩니다.

대화형 상태

다음 가상 클래스는 사용자가 페이지와 상호작용할 때 적용됩니다.

:hover

Browser Support

  • Chrome: 1.
  • Edge: 12.
  • Firefox: 1.
  • Safari: 2.

Source

사용자가 마우스나 트랙패드와 같은 포인팅 기기를 가지고 있고 이를 요소 위에 배치하는 경우 :hover를 사용하여 해당 상태에 후크를 걸어 스타일을 적용할 수 있습니다. 이는 요소와 상호작용할 수 있음을 암시하는 데 유용한 방법입니다.

:active

Browser Support

  • Chrome: 1.
  • Edge: 12.
  • Firefox: 1.
  • Safari: 1.

Source

이 상태는 클릭이 해제되기 전에 클릭과 같이 요소와 적극적으로 상호작용할 때 트리거됩니다. 마우스와 같은 포인팅 기기가 사용되는 경우 이 상태는 클릭이 시작되었으나 아직 해제되지 않은 상태입니다.

:focus, :focus-within, :focus-visible

Browser Support

  • Chrome: 1.
  • Edge: 12.
  • Firefox: 1.
  • Safari: 1.

Source

요소가 포커스를 받을 수 있는 경우(예: <button>) :focus 가상 클래스로 해당 상태에 반응할 수 있습니다.

:focus-within를 사용하여 요소의 하위 요소가 포커스를 받을 때도 반응할 수 있습니다.

버튼과 같이 포커스를 받을 수 있는 요소는 클릭되었을 때도 포커스가 있을 때 포커스 링을 표시합니다. 이러한 상황에서 개발자는 다음 CSS를 적용합니다.

button:focus {
    outline: none;
}

이 CSS는 요소가 포커스를 받을 때 기본 브라우저 포커스 링을 삭제하므로 키보드로 웹페이지를 탐색하는 사용자에게 접근성 문제가 발생합니다. 포커스 스타일이 없으면 키를 사용할 때 포커스가 현재 어디에 있는지 추적할 수 없습니다. :focus-visible를 사용하면 요소가 키보드를 통해 포커스를 수신할 때 포커스 스타일을 표시하고 outline: none 규칙을 사용하여 포인터 기기가 요소와 상호작용할 때 이를 방지할 수 있습니다.

button:focus {
    outline: none;
}

button:focus-visible {
    outline: 1px solid black;
}

:target

Browser Support

  • Chrome: 1.
  • Edge: 12.
  • Firefox: 1.
  • Safari: 1.3.

Source

:target 가상 클래스는 URL 프래그먼트와 일치하는 id가 있는 요소를 선택합니다. 다음과 같은 HTML이 있다고 가정해 보겠습니다.

<article id="content">
    …
</article>

URL에 #content가 포함된 경우 해당 요소에 스타일을 연결할 수 있습니다.

#content:target {
    background: yellow;
}

이 기능은 건너뛰기 링크를 통해 웹사이트의 기본 콘텐츠와 같이 특정 링크로 연결되었을 수 있는 영역을 강조 표시하는 데 유용합니다.

이전 상태

Browser Support

  • Chrome: 1.
  • Edge: 12.
  • Firefox: 1.
  • Safari: 1.

Source

:link 가상 클래스는 아직 방문되지 않은 href 값이 있는 모든 <a> 요소에 적용할 수 있습니다.

:visited

:visited 가상 클래스를 사용하여 사용자가 이미 방문한 링크의 스타일을 지정할 수 있습니다. 이는 :link와 반대 상태이지만 보안상의 이유로 사용할 수 있는 CSS 속성이 더 적습니다. color, background-color, border-color, outline-color 및 SVG fillstroke의 색상만 스타일을 지정할 수 있습니다.

순서가 중요

:visited 스타일을 정의하면 최소한 동일한 특이성을 가진 링크 가상 클래스로 재정의할 수 있습니다. 따라서 가상 클래스를 사용하여 링크의 스타일을 지정할 때는 특정 순서(:link, :visited, :hover, :active)로 LVHA 규칙을 사용하는 것이 좋습니다.

a:link {}
a:visited {}
a:hover {}
a:active {}

양식 상태

다음의 가상 클래스는 양식 요소와 상호작용하는 동안 양식 요소가 있을 수 있는 다양한 상태에서 양식 요소를 선택할 수 있습니다.

:disabled:enabled

Browser Support

  • Chrome: 1.
  • Edge: 12.
  • Firefox: 1.
  • Safari: 3.1.

Source

<button>와 같은 양식 요소가 브라우저에서 사용 중지된 경우 :disabled 가상 클래스로 해당 상태를 후크할 수 있습니다. :enabled 가상 클래스는 반대 상태에 사용할 수 있지만 양식 요소도 기본적으로 :enabled이므로 이 가상 클래스를 사용하지 않을 수도 있습니다.

:checked:indeterminate

Browser Support

  • Chrome: 1.
  • Edge: 12.
  • Firefox: 1.
  • Safari: 3.1.

Source

:checked 가상 클래스는 체크박스나 라디오 버튼과 같은 지원 양식 요소가 선택된 상태일 때 사용할 수 있습니다.

:checked 상태는 바이너리(true 또는 false) 상태이지만 체크박스는 선택 또는 선택 해제되지 않은 중간 상태가 있습니다. 이를 :indeterminate 상태라고 합니다.

이 상태의 예는 그룹의 모든 체크박스를 선택하는 '모두 선택' 컨트롤이 있는 경우입니다. 그런 다음 사용자가 이러한 체크박스 중 하나를 선택 해제하면 루트 체크박스가 더 이상 선택된 '모두'를 나타내지 않으므로 불확정 상태로 전환해야 합니다.

<progress> 요소에는 스타일을 지정할 수 있는 불확정 상태도 있습니다. 일반적인 사용 사례는 필요한 양을 알 수 없음을 나타내기 위해 줄무늬 모양을 사용하는 것입니다.

:placeholder-shown

Browser Support

  • Chrome: 47.
  • Edge: 79.
  • Firefox: 51.
  • Safari: 9.

Source

양식 필드에 placeholder 속성이 있고 값이 없는 경우 :placeholder-shown 가상 클래스를 사용하여 해당 상태에 스타일을 연결할 수 있습니다. 필드에 콘텐츠가 있으면 placeholder가 있든 없든 이 상태가 더 이상 적용되지 않습니다.

유효성 검사 상태

Browser Support

  • Chrome: 10.
  • Edge: 12.
  • Firefox: 4.
  • Safari: 5.

Source

:valid, :invalid, :in-range와 같은 가상 클래스를 사용하여 HTML 양식 유효성 검사에 응답할 수 있습니다. :valid:invalid 가상 클래스는 유효한 필드가 되도록 일치시켜야 하는 pattern가 있는 이메일 필드와 같은 컨텍스트에 유용합니다. 이 유효한 값 상태는 사용자에게 표시되어 사용자가 다음 입력란으로 안전하게 이동할 수 있음을 알 수 있도록 합니다.

:in-range 가상 클래스는 입력에 minmax가 있는 경우(예: 숫자 입력) 값이 해당 범위 내에 있는 경우에 사용할 수 있습니다.

HTML 양식을 사용하면 required 속성으로 필드가 필수인지 확인할 수 있습니다. 필수 입력란에는 :required 가상 클래스를 사용할 수 있습니다. 필수가 아닌 필드는 :optional 가상 클래스로 선택할 수 있습니다.

지수, 순서, 발생 횟수별로 요소 선택

문서 내 위치에 따라 항목을 선택하는 가상 클래스 그룹이 있습니다.

:first-child:last-child

Browser Support

  • Chrome: 4.
  • Edge: 12.
  • Firefox: 3.
  • Safari: 3.1.

Source

첫 번째 또는 마지막 항목을 찾으려면 :first-child:last-child를 사용하면 됩니다. 이러한 가상 클래스는 형제 요소 그룹의 첫 번째 요소 또는 마지막 요소를 반환합니다.

:only-child

Browser Support

  • Chrome: 2.
  • Edge: 12.
  • Firefox: 1.5.
  • Safari: 3.1.

Source

:only-child 가상 클래스를 사용하여 형제가 없는 요소를 선택할 수도 있습니다.

:first-of-type:last-of-type

Browser Support

  • Chrome: 1.
  • Edge: 12.
  • Firefox: 3.5.
  • Safari: 3.1.

Source

처음에는 :first-child:last-child와 동일한 작업을 하는 것처럼 보이는 :first-of-type:last-of-type를 선택할 수 있지만 다음 HTML을 고려해 보세요.

<div class="my-parent">
    <p>A paragraph</p>
    <div>A div</div>
    <div>Another div</div>
</div>

다음 CSS:

.my-parent div:first-child {
    color: red;
}

첫 번째 하위 요소가 div가 아닌 단락이므로 요소가 빨간색으로 표시되지 않습니다. 이 맥락에서는 :first-of-type 가상 클래스가 유용합니다.

.my-parent div:first-of-type {
    color: red;
}

첫 번째 <div>는 두 번째 하위 요소이지만 여전히 .my-parent 요소 내에서 첫 번째 유형이므로 이 규칙에 따라 빨간색으로 표시됩니다.

:nth-child:nth-of-type

Browser Support

  • Chrome: 1.
  • Edge: 12.
  • Firefox: 3.5.
  • Safari: 3.1.

Source

첫 번째 및 마지막 하위 요소와 유형으로 제한되지도 않습니다. :nth-child:nth-of-type 가상 클래스를 사용하면 특정 색인에 있는 요소를 지정할 수 있습니다. CSS 선택자의 색인은 1부터 시작합니다.

이러한 가상 클래스에 색인 외의 값도 전달할 수 있습니다. 짝수 요소를 모두 선택하려면 :nth-child(even)를 사용하면 됩니다.

An+B 마이크로 문법을 사용하여 일정한 간격으로 항목을 찾는 더 복잡한 선택기를 만들 수도 있습니다.

li:nth-child(3n+3) {
    background: yellow;
}

이 선택기는 항목 3부터 시작하여 3개마다 한 개씩 항목을 선택합니다. 이 표현식에서 n는 색인으로, 0부터 시작하며 3 (3n)은 이 색인에 곱하는 값입니다.

<li> 항목이 7개 있다고 가정해 보겠습니다. 3n+3(3 * 0) + 3로 변환되므로 선택되는 첫 번째 항목은 3입니다. 이제 n1로 증가했으므로 다음 반복에서는 항목 6((3 * 1) + 3))을 선택합니다. 이 표현식은 :nth-child:nth-of-type 모두에 적용됩니다.

nth-child 테스터 또는 이 수량 선택 도구에서 이러한 유형의 선택기를 사용해 볼 수 있습니다.

:only-of-type

Browser Support

  • Chrome: 1.
  • Edge: 12.
  • Firefox: 3.5.
  • Safari: 3.1.

Source

마지막으로 :only-of-type를 사용하여 형제 그룹에서 특정 유형의 유일한 요소를 찾을 수 있습니다. 이 방법은 항목이 하나만 있는 목록을 선택하거나 단락에서 유일하게 굵게 표시된 요소를 찾으려는 경우에 유용합니다.

빈 요소 찾기

완전히 비어 있는 요소를 식별하는 것이 유용할 때가 있으며, 이를 위한 가상 클래스도 있습니다.

:empty

Browser Support

  • Chrome: 1.
  • Edge: 12.
  • Firefox: 1.
  • Safari: 3.1.

Source

요소에 하위 요소가 없는 경우 :empty 가상 클래스가 적용됩니다. 그러나 하위 요소는 HTML 요소나 텍스트 노드만이 아닙니다. 공백일 수도 있습니다. 다음 HTML을 디버그하고 :empty에서 작동하지 않는 이유를 궁금해할 때 혼란스러울 수 있습니다.

<div>
</div>

이는 여는 <div>와 닫는 <div> 사이에 공백이 있으므로 비워 두면 작동하지 않기 때문입니다.

:empty 가상 클래스는 HTML을 거의 제어할 수 없고 WYSIWYG 콘텐츠 편집기와 같은 빈 요소를 숨기려는 경우에 유용할 수 있습니다. 여기에서 편집자가 잘못된 빈 단락을 추가했습니다.

<article class="post">
 <p>Donec ullamcorper nulla non metus auctor fringilla.</p>
 <p></p>
 <p>Curabitur blandit tempus porttitor.</p>
</article>

:empty를 사용하면 이를 찾아 숨길 수 있습니다.

.post :empty {
    display: none;
}

여러 요소 찾기 및 제외

일부 가상 클래스는 더 컴팩트한 CSS를 작성하는 데 도움이 됩니다.

:is()

Browser Support

  • Chrome: 88.
  • Edge: 88.
  • Firefox: 78.
  • Safari: 14.

Source

.post 요소에서 모든 h2, li, img 하위 요소를 찾으려면 다음과 같은 선택기 목록을 작성하는 것이 좋습니다.

.post h2,
.post li,
.post img {
    
}

:is() 가상 클래스를 사용하면 더 컴팩트한 버전을 작성할 수 있습니다.

.post :is(h2, li, img) {
    
}

:is 가상 클래스는 선택자 목록보다 컴팩트할 뿐만 아니라 더 관대합니다. 대부분의 경우 선택기 목록에 오류가 있거나 지원되지 않는 선택기가 있으면 전체 선택기 목록이 더 이상 작동하지 않습니다. :is 가상 클래스에 전달된 선택기에 오류가 있으면 잘못된 선택기는 무시되고 유효한 선택기는 사용됩니다.

:not()

Browser Support

  • Chrome: 1.
  • Edge: 12.
  • Firefox: 1.
  • Safari: 3.1.

Source

:not() 가상 클래스를 사용하여 항목을 제외할 수도 있습니다. 예를 들어 이를 사용하여 class 속성이 없는 모든 링크의 스타일을 지정할 수 있습니다.

a:not([class]) {
    color: blue;
}

:not 가상 클래스를 사용하면 접근성을 개선하는 데도 도움이 됩니다. 예를 들어 <img>에는 빈 값이라도 alt이 있어야 하므로 잘못된 이미지에 두꺼운 빨간색 윤곽선을 추가하는 CSS 규칙을 작성할 수 있습니다.

img:not([alt]) {
    outline: 10px red;
}

이해도 확인

가상 클래스에 대한 지식 테스트

가상 클래스는 클래스가 요소에 동적으로 적용된 것처럼 작동하지만 가상 요소는 요소 자체에 작동합니다.

거짓

다음 중 기능적 가상 클래스는 무엇인가요?

:not()
:is()
:target
:empty

다음 가상 클래스 중 사용자 상호작용으로 인해 적용되는 것은 무엇인가요?

:target
:squeeze
:focus-within
:press
:hover

다음 중 <form> 상태 가상 클래스는 무엇인가요?

:checked
:fresh
:valid
:enabled
:in-range
:indeterminate
:loading