가상클래스란?

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

• 사용자가 마우스를 올리면 요소의 스타일을 지정합니다.
• 방문한 스타일과 방문하지 않은 스타일이 다르게 적용됩니다.
• 요소가 포커스를 갖게되면 스타일을 지정합니다.

문법

        selector:pseudo-class {
            property:value;
          }

앵커 가상클래스

링크는 여러가지 방법으로 표시 될 수 있습니다.

        /* unvisited link */
a:link {
  color: #FF0000;
}

/* visited link */
a:visited {
  color: #00FF00;
}

/* mouse over link */
a:hover {
  color: #FF00FF;
}

/* selected link */
a:active {
  color: #0000FF;
}

** CSS정의에서 a:hover는 a:link와 a:visited다음에 와야 유효합니다.

** a:active는 a:hover다음에 와야 합니다.

** 가상클래스는 대소문자를 구분하지 않습니다.

가상클래스와 CSS클래스

가상클래스는 CSS클래스와 결합할 수 있습니다.

다음 예에서 링크 위로 마우스를 가져 가면 색상이 변경됩니다.

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

Hover on <div>

<div>요소에 :hover 가상클래스를 사용하는 예는 다음과 같습니다.

        div:hover {
            background-color: blue;
          }

간단한 툴팁 호버(Tooltip Hover) 

<div>요소 위로 마우스를 가져 가면 툴팁으로 <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 = "ko"를 사용하여 <q> 요소의 따옴표를 정의합니다.

        q:lang(ko) {
            quotes: "~" "~";
          }