Pseudo-class 셀렉터

:pseudo-class

---

Pseudo-class 셀렉터

상태에 따라서 스타일을 줄 수 있는 셀렉터를 말한다.

 

.btn:hover {
  background : chocolate; /*마우스를 올려놓을 때*/
}
.btn:focus {
  background : red; /*클릭 후 계속 포커스 상태일 때*/
}
.btn:active {
  background : brown; /*클릭 중일 때*/
}

/* hover, focus, active 스타일 넣을 때 순서는 꼭 이렇게 선언해야 잘 작동한다. */

 

:any-link /*방문 전, 방문 후 링크 한번에 선택할 때*/

:playing /*동영상, 음성이 재생중일 때*/
:paused /*동영상, 음성이 정지시*/

:autofill /*input의 자동채우기 스타일*/
:required /*필수로 입력해야할 input의 스타일*/
:blank /*input이 비었을 때*/

:disabled /*disabled된 요소 스타일*/

:checked /*체크박스나 라디오버튼 체크되었을 때*/

:valid /*이메일 input 등에 이메일 형식이 맞을 경우*/
:invalid /*이메일 input 등에 이메일 형식이 맞지 않을 경우*/

:nth-child(n) /*n번째 자식 선택*/
:first-child /*첫째 자식 선택*/
:last-child /*마지막 자식 선택*/

 

a:link { 
  color : red; /*방문 전 링크*/ 
} 
a:visited { 
  color : black; /*방문 후 링크*/ 
}

 

그외에도 많은 셀렉터가 존재한다.

https://developer.mozilla.org/ko/docs/Web/CSS/Pseudo-classes

 

 

 

::pseudo-element

---

내부의 일부분만 스타일을 줄 수 있는 셀렉터를 말한다.

after, before 빼면 대부분 쓸모없다.

::first-letter  /*안에 있는 글자 중 첫 글자만 스타일을 줄 수 있다.*/
::first-line /* 글자 중 첫 줄만 스타일을 줄 수 있다. */
::after  /* 내부의 맨 마지막 부분에 특정 글자같은걸 추가해줄 수 있다. */
::before  /* 내부의 맨 앞 부분에 특정 글자같은걸 추가해줄 수 있다. */