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

 

가상클래스

문서의 특정위치, 특정영역, 특정요소를 선택하기 위해 미리 만들어 놓은 선택자

- 이미 존재하는 요소를 선택하는 선택자

 

1. 구조선택자

  - 숫자가 아니고 순서를 의미하는 것

  - 특정위치에 있는 요소 선택

  - 선택자 : 요소명:가상클래스 (요소명대신 아이디, 클래스 명도 가능)

가상클래스	의미
:first-child	연속되는 자식 요소(같은부모의 자식) 중 첫번째 자식
:last-chlid	연속되는 자식 요소(같은부모의 자식) 중 마지막 자식
:nth-child(수열)	연속되는 자식 요소(같은부모의 자식) 중 수열에 해당하는 자식
:nth-child(odd)	연속되는 자식 요소(같은부모의 자식) 중 홀수번째 자식(2n+1)
:nth-child(even)	연속되는 자식 요소(같은부모의 자식) 중 짝수번째 자식(2n)
:nth-last-child(수열)	연속되는 자식 요소(같은부모의 자식) 중 뒤에서부터 수열번째 자식

📢 참고 -child가 붙어있으면 부모가 누구인지 먼저생각하는 습관을 갖자.

 

2. 반응선택자

  - 사용자의 마우스 동장에 반응

  - 선택자 : 요소명:가상클래스 (요소명대신 아이디, 클래스 명도 가능)

가상클래스	의미
:active	활성화된 링크, 마우스로 클릭했을때
:hover	마우스가 요소위에 올라갔을 때

 

3. 상태선택자

  - input요소의 상태에 따라 선택되는 선택자

  - 선택자 : 요소명:가상클래스 (요소명대신 아이디, 클래스 명도 가능)

가상클래스	의미
:checked	체크된 모든 <input>요소 선택
:focus	현재, 커서가 깜박거리고 있는 모든 <input>요소 선택
:enabled	작동 가능한 모든 <input>요소 선택
:disabled	작동 차된된 모든 <input>요소 선택
:invalid	유효하지 않는 값을 갖는 모든 <input>요소 선택
:vaild	유효한 값을 갖는 모든 <input>요소 선택

 

4. 링크선택자

  - 선택자 : 요소명:가상클래스 (요소명대신 아이디, 클래스 명도 가능)

가상클래스	의미
:link	모든 미방문 링크 선택
:visited	방문한 링크 선택

 

5. 부정선택자

  - 선택자 : 요소명:가상클래스 (요소명대신 아이디, 클래스 명도 가능)

가상클래스	의미
:not(selector)	해당 선택자가 아닌 모든 요소 선택

 

 

 

가상요소

문서의 특정위치, 특정영역, 특정요소를 선택하기 위해 미리 만들어 놓은 선택자

  - 존재하지 않지만 가상의 요소를 생성하여 선택하는 선택자

  - 선택자 : 요소명::가상요소 (요소명대신 아이디, 클래스 명도 가능)

 

가상요소	의미
::before	선택된 요소안의 콘텐츠 앞쪽 선택 (기본값 : 인라인)
::after	선택된 요소안의 콘텐츠 뒷쪽 선택 (기본값 : 인라인)
::selection	사용자가 드래그한 글자를 선택(사용자 선택요소)
::first-letter	첫번째 글자를 선택
::first-line	첫번째 라인을 선택

 

📢 참고
1. 가상클래스는 가상요소보다 구체성이 높다
2. before, after 사용시 content스타일 속성을 이용하여 콘텐츠를 추가하는데 이는 float를 해지하는데 사용된다. 이에 관련된 내용은 추후에 정리 해서 올리겠습니다.
3. 가상요소 선택자 앞에 '::'를 붙이는 것이 표준이나 ';'를 써도 무방하지만 '::'을 쓰는것을 권장