> For the complete documentation index, see [llms.txt](https://leeans-dev-book.gitbook.io/docs/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://leeans-dev-book.gitbook.io/docs/lecture/html-css/pseudo-class.md).

# pseudo-class

**상태에 따라서 스타일을 줄 수 있는 Pseudo-class 셀렉터**

```html
<button class="btn"> 구매하기</button>
<input class="input-test">
<a href="#" class="link-test">링크</a>
```

```css


.btn {
    padding: 15px;
    font-size: 20px;
    border: none;
    border-radius: 10px;
    background-color: coral;
    color: white;
    cursor: pointer;
}

.btn:hover {  /*마우스를 올려놓을 때*/
    background-color: chocolate;

}
.btn:focus { /*클릭 후 계속 포커스 상태일 때*/
    background-color: grey;

}
.btn:active {  /*클릭 중일 때*/
    background-color: darkblue;
    border: 2px solid black;
}



.input-test{
    font-size: 20px;

}
.input-test:focus{
    border: 4px solid red;
}

.link-test {
    text-decoration: none;

}
.link-test:link {
    color: chocolate;
}

.link-test:visited {
    color: black;
}
```

기타 다양한 가상 선택자

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

**input 등에도 자주 사용합니다**

인풋에 커서가 찍혀있을 때 인풋에 스타일을 주고 싶으면 당연히 :focus를 붙이면 됩니다.

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