[CSS] 의사클래스 / 의사요소

의사클래스

의사클래스 (가상클래스)는 선택자에 추가하는 키워드로, 요소가 어떤 특정한 상태가 되었을 때 요소를 선택하겠다는 의미이다.

선택자:의사클래스 { 속성명: 속성값 };

ex) h1:hover{ color:red; }
-> h1 요소에 마우스 커서가 올라오면 글자를 빨간색으로

선택자에 사용 가능한 모든 의사 클래스 : https://developer.mozilla.org/ko/docs/Web/CSS/Pseudo-classes

의사요소

의사요소는 선택자에 추가하는 키워드로, 선택한 요소의 특정 부분에 대한 스타일을 정의할 수 있다.

선택자::의사요소 { 속성명: 속성값 }

ex) li::first-letter{ font-size: 20px; }
-> li 요소의 첫 번째 글자만 20px의 크기

HTML 문서가 포함하지 않는 개체( 목록의 구분점, placeholder ..)를 선택할 수 있어 유용하다.