1st revised - 2022년 9월 19일
가상 선택자
CSS에는 가상 요소(:pseudo-element)와 가상 클래스(:pseudo-class)가 있다. 이것들을 사용해서 html 문서의 수정 없이 CSS만으로 디자인적 요소를 추가할 수 있어 html 문서에 쓸데없는 태그를 사용하여 화면 리더기 등에 쓸데없는 정보가 읽히거나 불필요한 클래스를 남발해 코드 가독성을 낮추지 않게 한다.
가상 클래스의 장점 중 하나는 오직 CSS를 주기 위해 클래스를 추가할 필요가 없다는 것이다.
📌가상 클래스 (pseudo-class)
실제로 존재하는 요소에 특정 이벤트나 환경에 맞춰 가상으로 클래스를 주어 css로 제어하는 것을 말한다.
선택자:가상클래스:link - 방문한 적이 없는 링크
:visited - 방문한 적이 있는 링크
:hover - 마우스를 롤오버 했을 때
:active - 마우스를 클릭했을 때
:focus - 포커스 되었을 때 (input 태그 등)
:first - 첫번째 요소
:last - 마지막 요소
:first-child - 첫번째 자식
:last-child - 마지막 자식
:nth-child(2n+1) - 홀수 번째 자식
📌가상 요소 (pseudo-element)
실제로 존재하지 않는 가상의 요소를 만들어 스타일을 주는 것을 말한다.
초기에는 콜론(:)을 사용했지만 가상 클래스와의 구분을 하기 위해 이중콜론(::)의 사용이 표준이다.
선택자::가상요소::before - 지정된 요소의 앞에 가상의 요소 생성
::after - 지정된 요소의 뒤에 가상의 요소 생성
::first-letter - 지정된 요소의 첫 번째 글자에 스타일 적용
::first-line - 지정된 요소의 첫 번째 줄에 스타일 적용
출처 :
https://mber.tistory.com/35
https://designer-ej.tistory.com/entry/CSS-root-%EA%B0%80%EC%83%81-%ED%81%B4%EB%9E%98%EC%8A%A4%EB%A1%9C-CSS-%EB%B3%80%EC%88%98-%EB%8B%A4%EB%A3%A8%EA%B8%B0
https://abcdqbbq.tistory.com/15
