[CSS] pseudo class

 

CSS 의사 클래스(pseudo class)는 선택자에 추가되는 키워드로, 요소의 특정 상태를 지정합니다. 

 

링크에 CSS 을 줄 때는 dynamic  pseudo-classes 를 활용하여 아래처럼

link , visited , hover , active  4개를 전부 꾸며줘야 합니다.

 

/* 링크 스타일링  */
a:link {
  color: #1098ad;
  text-decoration: none;
}
a:visited {
  color: grey;
}
a:hover {
  color: orangered;
  font-weight: bold;
  text-decoration: underline  orangered;
}
a:active {
  background-color: black;
  font-style: italic;
}

 

그 밖의 pseudo class 는 다음과 같습니다.

 

 

1. Dynamic pseudo-classes
:link 사용자가 아직 한 번도 해당 링크를 통해서 연결된 페이지를 방문하지 않은 상태를 모두 선택함. (기본 상태)
:visited 사용자가 한 번이라도 해당 링크를 통해서 연결된 페이지를 방문한 상태를 모두 선택함.
:hover 사용자의 마우스 커서가 링크 위에 올라가 있는 상태를 모두 선택함.
:active 사용자가 마우스로 링크를 클릭하고 있는 상태를 모두 선택함.
:focus 초점이 맞춰진 input 요소를 모두 선택함.

 

2. UI element states pseudo-classes
:checked 체크된(checked) 상태의 input 요소를 모두 선택함.
:enabled 사용할 수 있는 input 요소를 모두 선택함.
:disabled 사용할 수 없는 input 요소를 모두 선택함.

:target 현재 활성화된 target 요소를 모두 선택함.

 

3. Structural pseudo-classes
:first-child 모든 자식(child) 요소 중에서 첫 번째에 위치하는 자식(child) 요소를 모두 선택함.
:last-child 모든 자식(child) 요소 중에서 마지막에 위치하는 자식(child) 요소를 모두 선택함.
:nth-child(n) 모든 자식(child) 요소 중에서 앞에서부터 n번째에 위치하는 자식(child) 요소를 모두 선택함.(odd, even 도 가능)
:nth-last-child(n) 모든 자식(child) 요소 중에서 뒤에서부터 n번째에 위치하는 자식(child) 요소를 모두 선택함.
:first-of-type 모든 자식(child) 요소 중에서 첫 번째로 등장하는 특정 요소를 모두 선택함.
:last-of-type 모든 자식(child) 요소 중에서 마지막으로 등장하는 특정 요소를 모두 선택함.
:nth-of-type 모든 자식(child) 요소 중에서 n번째로 등장하는 특정 요소를 모두 선택함.
:nth-last-of-type 모든 자식(child) 요소 중에서 뒤에서부터 n번째로 등장하는 특정 요소를 모두 선택함.
:only-child 자식(child) 요소를 단 하나만 가지는 모든 요소의 자식(child) 요소를 선택함.
:only-of-type 자식(child)  요소를 특정 요소 단 하나만 가지는 모든 요소의 자식(child) 요소를 선택함.
:empty 아무런 자식(child) 요소도 가지지 않는 요소를 모두 선택함.
:root 문서의 root 요소를 선택함.

 

4. Form pseudo-classes

:required: 필수 입력 속성을 가진 폼 요소를 선택합니다.
:optional: 필수가 아닌 폼 요소를 선택합니다.
:valid: 유효한 내용을 가진 폼 요소를 선택합니다.
:invalid: 유효하지 않은 내용을 가진 폼 요소를 선택합니다.

5. Input pseudo-classes

:in-range 특정 범위 내의 값을 가지는 input 요소를 모두 선택함.
:out-of-range 특정 범위를 벗어나는 값을 가지는 input 요소를 모두 선택함.
:read-only readonly 속성을 가지는 input 요소를 모두 선택함.
:read-write readonly 속성을 가지지 않는 input 요소를 모두 선택함.

 

6. 기타 
:not(선택자) 모든 선택자와 함께 사용할 수 있으며, 해당 선택자를 반대로 적용함.
:lang(언어) 특정 요소를 언어 설정에 따라 다르게 표현할 때에 사용함.