css 가상 클래스 & 동적 가상 클래스

가상 클래스: 어떤 상태나 조건을 만족할때 사용할 수 있는 클래스

• 일일이 클래스명을 지정해줄 필요 없는 장점이 있음
• 사용법은 아래 주석 참고

/* li 태그의 첫번째 요소인 경우 */
li:first-child {
  color: #0066ff;
}

/* li 태그의 마지막 요소인 경우 */
li:last-child {
  color: #ffc82c;
}

/* li 태그 중 3번째 요소 */
li:nth-child(3) {
  color: #ff4949;
}

/* li 태그 중 짝수인 요소 */
li:nth-child(2n) {
  color: #ff4949;
}

동적 가상 클래스: 사용자의 액션이 있을 때 마다 선택되는 선택자

• 종류로는 hover, focus, active 가 있음

/* 마우스를 올리면 스타일 적용 */
a:hover {
  background-color: #7e5bef;
}

/* 누르는 찰나에 스타일을 적용 */
a:active {
  background-color: #592dea;
}

/* input 태그에 작업을 수행할 때 적용 */
input:focus {
  border-color: red;
}