• 가상 클래스란 요소의 특정한 상태를 선택하는데 사용되는 방법
  • 콜론(:)을 한개만 적음
• 가상 요소란 실제로 존재하지 않는 가상의 요소를 만들어 스타일을 지정하는 방법
  • 콜론(::)을 두개 적음
• 인터랙티브와 관련된 선택자 및 특별한 규칙을 가진 요소에 접근할 수 있도록 제공한다.

hover

• hover 선택자는 마우스 포인터가 요소에 올라갔을때에 지정할 스타일을 작성할 수 있다.

.element {
	width: 300px;
	height: 300px;
	color: black;
	background-color: yellow;
}

/* 마우스를 올렸을 때 글씨와 배경 색상 변경 */
.element:hover {
	color: white;
	background-color: red;
}

focus

• focus 선택자는 사용자의 상호작용을 통해 포커스 받았을때에 지정할 스타일을 작성할 수 있다.
• 주로 input, select, button 등의 HTML 태그에서 사용된다.

/* 사용자 상호작용을 통해 포커스 되었을때, 경계선 지정 */
input:focus, select:focus {
	border: 1px solid red;
}1

before, after

• before 선택자는 요소의 맨 앞에 새로운 컨텐츠를 넣을 수 있는 선택자
• after 선택자는 요소의 맨 뒤에 새로운 컨텐츠를 넣을 수 있는 선택자
• content 속성을 필수적으로 넣어야 한다.

.element1:before {
	content: "이전에 들어갈 문구";
	color: blue;
}

.element2:after {
	content: "홍길동";
}

.element3:before {
	content: ""; /* 문구가 들어가지 않는다면 빈문자열 넣기 */
	width: 15px;
	height: 15px;
	background-color: blue;
}

last-child

• last-child 선택자는 하위 요소 중 가장 마지막에 배치된 요소를 가리킨다.

<ul>
	<li>첫번째 요소입니다.</li>
	<li>두번째 요소입니다.</li>
	<li>세번째 요소입니다.</li>
	<li>마지막 요소입니다.</li>
</ul>

<style>
	/* 마지막 요소의 글자 색깔을 빨간색으로 지정 */
	li:last-child {
		color: red;
	}
</style>

visited

• visited 선택자는 a 태그에서만 사용 가능하며, 이미 해당 태그를 클릭해서 방문했을때의 스타일을 지정할 수 있다.