# 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;
}
```


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://leeans-dev-book.gitbook.io/docs/lecture/html-css/pseudo-class.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.