작업 중 가상 요소 after, before을 사용해보면서 이에 대한 공부가 필요할 것 같아서 정리한다.

💡 가상 클래스와 가상 요소

CSS 선택자에는 가상 클래스 선택자와 가상 요소 선택자가 존재한다
이들은 원하는 요소의 뒤에 :나 ::를 이용한 키워드를 붙여서 스타일을 적용할 수 있다.

🔍가상 클래스 선택자

웹 요소를 클릭하거나 마우스를 올려 놓는 등 동작을 할 때 스타일을 설정하는 선택자이다.
이때 까지 :hover 선택자는 많이 사용해 봤는데 이번에 정확한 의미를 알게 되었다.

사용자 동작에 반응하는 가상 클래스

사용자의 동작(커서, 입력, 클릭)등에 따라 스타일을 적용하는 클래스 선택자

가상 클래스 선택자	용도
:hover	요소에 마우스 포인터를 올려놓으면 css style을 적용한다.
:link	방문하지 않은 링크에 스타일을 적용한다.
:visited	:link와 반대로 한번 이상 방문한 링크에 스타일을 적용한다.
:active	웹 요소를 활성화 했을 때 스타일 적용 (링크 클릭이나 버튼 클릭)
:focus	웹 요소에 초점이 맞추어졌을 때 스타일 적용(form의 텍스트 필드 등)

⚠️ 주의할점

메뉴 링크를 사용할 때 hover, link, visited, active를 자주 사용하게 되는데 link > visited > hover > active 순으로 정의해야 스타일에 정상적으로 작동한다.

요소 상태에 따라 적용되는 가상 클래스

요소의 속성이나 현재 상태에 따라서 적용되는 클래스 선택자

가상 클래스 선택자	용도
:target	링크로 선택자를 넘겨주었을 때 해당 링크 이동 시 해당 선택자의 스타일 적용
:enabled	요소가 사용할 수 있는 상태
:disabled	요소를 사용할 수 없는 상태(예시- textarea disabled속성)
:checked	라디오박스나 체크 박스에서 checked속성이 있는 요소의 스타일 적용
:not	element:not[type=요소] 형태로 사용하며 괄호 안의 요소를 제외하고 스타일 적용

구조 가상 클래스

요소의 특정 위치를 기반으로 스타일을 적용하는 선택자

가상 클래스 선택자	용도
:only-child	자식 요소가 하나 뿐일때
A:only-type-of	부모 안에 A요소가 하나 뿐일때
:first-child	첫 번째 자식 요소
:last-child	마지막 자식 요소
A:first-child	첫 번째 자식 A 요소
A:last-child	마지막 자식 A 요소
:nth-child(n)	n 번째 자식 요소
:nth-last-child(n)	끝에서부터 n번째 자식 요소
A:nth-child(n)	부모의 n 번째 요소이면서 A 요소일 때
A:nth-of-type(n)	A인 자식요소들 중 n번째
A:nth-last-of-type(n)	A인 자식요소들 중 뒤에서 n번째

📒 (n)의 값에는 2n+1, 2n, 3n 처럼 수식을 이용해서 짝수번째, 3의 배수, 1,3,5,7 등 규칙을 이용해서 스타일을 지정할 수 있다.

☢️ 구조 가상 클래스에서 A 자리에 들어가는 요소는 li, p, div와 같은 태그 선택자만 적용되고, .test:nth-of-type(1) 처럼 클래스, 속성, 등의 선택자의 영향은 받지 않는다.

🔍 가상 요소 선택자

가상 요소는 스타일 적용을 위한 불필요한 태그 사용을 줄이기 위한 선택자로 가상 클래스와 다르게 콜론 2개 :: 를 붙여서 표시한다.

가상 요소	설명
::before	지정 요소의 내용 앞에 스타일 지정
::after	지정 요소의 내용 뒤에 스타일 지정
::selection	사용자가 드래그한 부분
::marker	ul,li 에서 말머리 기호(marker)에 스타일을 지정하는 선택자
::first-letter	첫 번째 글자
::first-line	첫 번째 줄

📓 후기

가상 선택자들 일부를 사용해왔지만 :, :: 처럼 :를 쓰는 모양이 다른 이유에 대해서 생각해보지 않았었는데 오늘 공부로 어느정도 정리가 된 것 같다.