Pseudo class

Pseudo-class selector(btn - hofa)

.btn:hover {
    background: chocolate;
}

.btn:focus {
    background: red;
}

.btn:active {
    background: brown;
}

• pseudo-class selector를 적용하면 여러 상태에 따른 스타일을 지정해줄 수 있다
  - hover: 마우스를 올려 놓았을 때
  - focus: 클릭 후 계속 포커스 상태 일 때(다른 곳을 클릭하면 focus 상태 해제)
  - active: 클릭 중 일 때
• 위 상태에 스타일을 넣을 때는 hover > focus > active 순서대로 css에 선언해줘야 잘 동작한다

다양한 Pseudo-class

input:focus {
    border: 2px solid red;
}

a:link {
    color: red; /* 방문 전 링크 색상 */
}

a:visited {
    color: black; /* 방문 후 링크 색상 */
}

:any-link /* 방문 전, 방문 후 링크 한 번에 선택할 때 */
:playing /* 동영상, 음성이 재생 중 일 때 */
:paused /* 동영상, 음성이 정지 시 */
:autofill /* input의 자동채우기 스타일 */
:disabled /* disable된 요소 스타일 */
:checked /* 체크박스나 라디오버튼 체크되었을 때 */
:blank /* input이 비었을 때 */
:valid /* 이메일 input 등이 이메일 형식에 맞을 경우 */
:invalid /* 이메일 input 등이 이메일 형식에 맞지 않을 경우 */
:required /* 필수로 입력해야 할 input의 스타일 */
:nth-child(n) /* n번째 자식 선택 */
:first-child /* 첫번째 자식 선택 */
:last-child /* 마지막 자식 선택 */

• 더 많은 pseudo-class: https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-classes