[CSS3] 가상 클래스 & 요소 선택자

---

알고있으면 좋은 CSS3 Tip✨

---

가상 클래스 & 요소 선택자란 무엇인가?

• 가상 클래스 선택자
  1. 특정 상태일 때 스타일을 적용하는 것이다.
  2. 기존에 존재하는 요소를 선택하는 것이다.
  3. 가상 클래스 선택자는 콜론을 1개 붙인 :hover와 같은 형태이다.
• 가상 요소 선택자
  1. 특정 상태가 아니더라도 스타일을 적용할 수 있다.
  2. 기존에 존재하지 않는 가상의 요소를 만들어 선택하는 것이다.
  3. 가상 요소 선택자는 콜론을 2개 붙인 ::before로 작성한다.

 

(1) 가상 클래스 선택자

	가상클래스	내용
1	:active	a, button과 함께 사용하는 경우가 많다. 사용자가 활성화한 요소를 나타낸다. (마우스로 요소 클릭 시)
2	:only-child	형제가 없는 요소를 선택할 때 사용된다. :first-child:last-child 와 동일하다.
3	:hover	마우스 커서가 올라가 있을 때(마우스 오버)선택된다.
4	:only-of-type	같은 유형의 요소 형제가 없을 때 적용된다.
5	:checked	요소를 선택했거나 radio, checkbox의 옵션에 체크한 경우 활성화된다.
6	:invalid	input이나 form 태그 등의 유효성을 검사할 때 사용된다.
7	:out-of-range	input박스에 설정한 max값을 초과하는 등 한계치를 벗어났을 때 사용된다.
8	:nth-child()	형제의 순서에 따라 요소를 선택한다. odd(홀수), even(짝수) 로도 사용 가능하다.
9	focus	input 태그 등의 입력칸이 포커스되었을 때 사용된다. 자식에 사용하려면 :focus-within을 사용하면 된다.
10	:link	href 속성을 가진 태그 중, 아직 방문하지 않은 요소에 사용하면 된다.
11	:visited	사용자가 방문한 적있는 링크에 해당된다.

 

(2) 가상 요소 선택자

	가상요소	내용
1	::after	::after가 선택된 요소의 맨 마지막 자식으로 요소를 하나 생성한다.
2	::before	::before가 선택된 요소의 맨 첫번째 자식으로 요소를 하나 생성한다.
3	::first-letter	선택한 요소의 첫 번째 글자에 스타일이 적용된다.
4	::first-line	선택한 요소의 첫 번째 줄애 스타일이 적용된다.
5	::selection	선택한 요소의 하이라이트 스타일을 적용한다. color, background, text-decoration과 그 관련 속성, text-shadow와 같은 특정 속성에만 적용된다.