CSS 패시브 클래스

대체 클래스는 무엇인가요?

대체 클래스는 요소의 특수 상태를 정의하는 데 사용됩니다.

예를 들어, 다음과 같이 사용할 수 있습니다:

  • 요소에 마우스를 올려다둔 때의 스타일을 설정
  • 방문한 링크와 방문하지 않은 링크에 다른 스타일을 설정
  • 요소가 포커스를 받았을 때의 스타일을 설정
마우스를 올려다둬 주세요

문법

대체 클래스의 문법:

선택자:pseudo-class {
  property: value;
}

고정 클래스

링크는 다양한 방식으로 표시될 수 있습니다:

예제

/* 방문하지 않은 링크 */
a:link {
  color: #FF0000;
}
/* 방문한 링크 */
a:visited {
  color: #00FF00;
}
/* 마우스를 올려다둔 링크 */
a:hover {
  color: #FF00FF;
}
/* 선택된 링크 */
a:active {
  color: #0000FF;
}

자신이 직접 시도해 보세요

주의:a:hover CSS 정의 내에서 반드시, a:link 와 a:visited 적용되기 전에 반드시!a:active CSS 정의 내에서 반드시, a:hover 적용되기 전에 반드시, 대체 클래스 이름은 대소문자를 구분하지 않습니다!

대체 클래스와 CSS 클래스

대체 클래스는 CSS 클래스와 함께 사용될 수 있습니다:

예제의 링크에 마우스를 올려다둘 때, 색상이 변경됩니다:

예제

a.highlight:hover {
  color: #ff0000;
}

자신이 직접 시도해 보세요

<div> 위에 마우스를 올려다둬

<div> 요소에서 사용 :hover 대체 클래스의 예제:

예제

div:hover {
  background-color: blue;
}

자신이 직접 시도해 보세요

간단한 툴팁 마우스 오버

<div> 요소에 마우스를 올려다 대어 <p> 요소를 표시합니다(툴팁 효과와 유사):

여기에 마우스를 올려다 대어 <p> 요소를 표시합니다.

허허, 여기에 있어요!

예제

p {
  display: none;
  background-color: yellow;
  padding: 20px;
}
div:hover p {
  display: block;
}

자신이 직접 시도해 보세요

CSS - :first-child 가상 클래스

:first-child 가상 클래스는 지정된 요소와 일치합니다: 이 요소는 다른 요소의 첫 번째 자식입니다.

첫 번째 <p> 요소를 매칭합니다

아래의 예제에서, 선택자는 어떤 요소의 첫 번째 자식으로서의 모든 <p> 요소를 매칭합니다:

예제

p:first-child {
  color: blue;
}

자신이 직접 시도해 보세요

모든 <p> 요소에 있는 첫 번째 <i> 요소를 매칭합니다

아래의 예제에서, 선택자는 모든 <p> 요소에 있는 첫 번째 <i> 요소를 매칭합니다:

예제

p i:first-child {
  color: blue;
}

자신이 직접 시도해 보세요

첫 번째 <p> 요소에 있는 모든 <i> 요소를 매칭합니다

아래의 예제에서, 선택자는 다른 요소의 첫 번째 자식으로서 <p> 요소에 있는 모든 <i> 요소를 매칭합니다:

예제

p:first-child i {
  color: blue;
}

자신이 직접 시도해 보세요

CSS - :lang 가상 클래스

:lang 가상 클래스는 다른 언어에 대해 특별한 규칙을 정의할 수 있습니다.

아래의 예제에서,:lang lang="en" 속성을 가진 <q> 요소에 인용부호를 정의합니다:

예제

<html>
<head>
<style>
q:lang(en) {
  quotes: "~" "~";
}
</style>
</head>
<body>
<p>Some text <q lang="no">A quote in a paragraph</q> Some text.</p>
</body>
</html>

자신이 직접 시도해 보세요

더 많은 예제

주소에 다른 스타일 추가
하위 스타일을 추가하는 방법을 보여줍니다.
:focus를 사용하다
:focus 가상 클래스를 사용하는 방법을 보여줍니다.

모든 CSS 가상 클래스

선택기 예제 예제 설명
:active a:active 활성 링크를 선택합니다.
:checked input:checked 선택된 각 <input> 요소를 선택합니다.
:disabled input:disabled 사용자가 비활성화된 각 <input> 요소를 선택합니다.
:empty p:empty 각 자식 요소가 없는 각 <p> 요소를 선택합니다.
:enabled input:enabled 모든 활성화된 <input> 요소를 선택.
:first-child p:first-child 부모의 첫 번째 자식 요소로 선택된 각 <p> 요소.
:first-of-type p:first-of-type 부모의 첫 번째 <p> 요소로 선택된 각 <p> 요소.
:focus input:focus 포커스를 받은 <input> 요소를 선택.
:hover a:hover 마우스가 올라가는 링크를 선택.
:in-range input:in-range 지정된 범위의 값을 가진 <input> 요소를 선택.
:invalid input:invalid 잘못된 값을 가진 모든 <input> 요소를 선택.
:lang(언어) p:lang(it) lang 속성 값이 "it"로 시작하는 각 <p> 요소를 선택.
:last-child p:last-child 부모의 마지막 자식 요소로 선택된 각 <p> 요소.
:last-of-type p:last-of-type 부모의 마지막 <p> 요소로 선택된 각 <p> 요소.
:link a:link 모든 방문하지 않은 링크를 선택.
:not(선택자) :not(p) 각 비 <p> 요소의 요소를 선택.
:nth-child(n) p:nth-child(2) 부모의 두 번째 자식 요소로 선택된 각 <p> 요소.
:nth-last-child(n) p:nth-last-child(2) 부모의 두 번째 자식 요소로 선택된 각 <p> 요소, 마지막 자식 요소부터 세어.
:nth-last-of-type(n) p:nth-last-of-type(2) 부모의 두 번째 <p> 요소로 선택된 각 <p> 요소, 마지막 자식 요소부터 세어.
:nth-of-type(n) p:nth-of-type(2) 부모의 두 번째 <p> 요소로 선택된 각 <p> 요소.
:only-of-type p:only-of-type 부모의 유일한 <p> 요소로 선택된 각 <p> 요소.
:only-child p:only-child 부모의 유일한 자식 요소로 선택된 <p> 요소.
: 선택사항 입력: 선택사항 "required" 속성을 가지지 않는 <input> 요소를 선택합니다.
:out-of-range input:out-of-range 지정된 범위를 벗어난 값이 있는 <input> 요소를 선택합니다.
:read-only input:read-only "readonly" 속성을 지정한 <input> 요소를 선택합니다.
:read-write input:read-write "readonly" 속성을 가지지 않는 <input> 요소를 선택합니다.
:required input:required "required" 속성을 지정한 <input> 요소를 선택합니다.
:root root 요소의 뿌리 요소를 선택합니다.
:target #news:target 현재 활성된 #news 요소를 선택합니다（해당 앵커 이름을 포함하는 URL을 클릭했습니다）。
:valid input:valid 모든 유효한 값을 가진 <input> 요소를 선택합니다.
:visited a:visited 모든 방문한 링크를 선택합니다.

모든 CSS 가상 요소

선택기 예제 예제 설명
::after p::after 모든 <p> 요소 뒤에 내용을 삽입합니다.
::before p::before 모든 <p> 요소 앞에 내용을 삽입합니다.
::first-letter p::first-letter 모든 <p> 요소의 첫 글자를 선택합니다.
::first-line p::first-line 모든 <p> 요소의 첫 번째 줄을 선택합니다.
::selection p::selection 사용자가 선택한 요소 부분을 선택합니다.