CSS : 선택자 - 가상 클래스와 가상 요소 선택자

가상 선택자

CSS에는 가상 요소(:pseudo-element)와 가상 클래스(:pseudo-class)가 있다. 이것들을 사용하여 HTML 문서의 수정 없이 CSS만으로 디자인적 요소를 추가할 수 있어 HTML문서에 쓸데없는 태그를 사용하여 가독성을 낮추는 것을 방지한다.

선택자 : 가상클래스 { property : value ; }

ex) a:hover { color : red; }

---

가상 클래스

가상 클래스는 선택자 끝에 붙여 상태를 특정하는 키워드이다.

• :hover : 사용자가 해당 요소에 마우스 커서를 가져다 댔을 때
• :active : 요소가 활성화 되었거나 클릭 되었을 때
• :focus : 해당 요소에 키보드 포커스가 맞춰졌을 때

---

순서에 따른 가상 클래스

가상 클래스의 장점 중 하나는 오직 CSS를 주기 위해 클래스를 추가할 필요가 없다는 것이다.

• :first-child : 첫번째 요소에 해당 CSS를 적용
• :last-child : 마지막 해당 요소에 해당 CSS 적용
• :nth-child(n) : n번째 요소에 해당 CSS 적용

 ol li:first-child {
 	border-top: none;
 }

 ol li:last-child {
 	border-top: none;
 }

ol li:nth-child(2) {
    border-top: none;
}

---

가상 요소

가상 클래스가 실제로 존재하는 요소에 클래스 추가 없이 디자인을 입히기 위한 것이라면, 가상 요소는 아예 실제로 존재하지 않는 요소를 만들게 해준다.

선택자::가상요소 {property : value; }

• ::first-line : 첫번째 줄에 css 적용
• ::first-letter : 첫번째 글자에 css 적용
• ::before : 요소 내용 앞쪽에 새 콘텐츠 추가
• ::after : 요소 내용 끝에 새 콘텐츠 추가
• ::selection : 드래그와 같이 선택하는 영역에서 css를 적용해줌

---