[CSS] [10-3] 가상 클래스와 가상 요소

[10-3] 가상 클래스와 가상 요소

*가상클래스: 웹 문서의 여러 요소들 중 원하는 요소를 선택 

*가상요소: 문서 안 특정 부분에 스타일을 지정하기 위해, 가상으로 요소를 만들어 추가(특별히 화면에 보이는 부분을 꾸밀 때, 불필요한 태그를 사용하지 않도록 하려고)

 

1. 가상 클래스 - 클래스 이름 앞에 :을 1개만 붙임

-사용자 동작에 반응할 때 씀 (마우스 포인터를 올려둔다거나, ...)

-순서 : LoVe HA (순서 바뀌면 스타일 적용되지 않음)	:link (혹은 a:link)	-아직 방문 not yet 링크에 스타일을 적용하고 싶을 때
	:visited (혹은 a:visited)	-이미 방문한 링크에 스타일을 적용하고 싶을 때
	:hover (혹은 a:hover)	-마우스 포인터를 특정 요소 위에 올려놨을 때 스타일이 바꼈으면 좋겠을 때
	:active (혹은 a:active)	-클릭했을 때 스타일이 바꼈으면 좋겠을 때
	:focus (혹은 a:focus)	-웹 요소에 초점이 맞추어졌을 때 스타일을 적용 (ex. 텍스트 필드 안에 마우스 포인터를 올려놓거나, 웹 문서에서  tab키를 눌러 커서를 이동시켰을 때)

:target	-앵커 대상(목적지)에 스타일을 적용
:enabled &  :disabled	-지정한 요소를 사용할 수 있는/ 없는 상태일 때, 스타일을 적용
:checked	-선택한 요소의 스타일을 적용 (주로 체크박스/라디오박스를 체크하면 :checked속성이 추가됨)
:not	-지정한 요소가 아닐 때 선택해서 스타일을 적용 예시1 예시2

 

2. 구조 가상 클래스

:only-child	-부모 안에 자식 요소가 하나뿐일 때, 자식 요소에 스타일을 적용
:first-child :last-child	-부모 안에 있는 모든 요소들 중에서, 첫 번째/마지막 번째 자식 요소에 스타일을 적용
:nth-child(n) :nth-last-child(n)	-부모 안에 있는 모든 요소들 중에서, n번째 자식 요소에 스타일을 적용 -부모 안에 있는 모든 요소들 중에서, 끝에서 n번째 자식 요소에 스타일을 적용 예시 ① .contents:nth-child(3)  =>.contents의 세번째 자식요소에  ② .div p:nth-child(3)  =>.div요소에서 세번째로 나타나는 자식인 p요소에 ③ .div p:nth-child(odd) / .div p:nth-child(2n+1)  =>.div요소에서 홀수번째로 나타나는 자식인 p요소에 ④ .div p:nth-child(even) / .div p:nth-child(2n)  =>.div요소에서 짝수번째로 나타나는 자식인 p요소에
A:only-type-of	-부모 안에 A요소가 하나뿐일 때 선택하여 스타일을 적용
A:first-of-type A:last-of-type	-부모 안에 있는 A요소 중에서, 첫 번째/마지막 번째 요소에 스타일을 적용
A:nth-of-type(n) A:nth-last-of-type(n)	-부모 안에 있는 A요소 중에서, n번째 요소에 스타일을 적용 -부모 안에 있는 A요소 중에서, 끝에서 n번째 요소에 스타일을 적용 ① .contents p:nth-of-type(3) =>.contents의 p요소 중, 세번째 자식요소에  ② table tr:nth-of-type(2n+1)  =>부모 안에 있는 table tr요소들 중, 홀수번째 요소들에 ③ #signup fieldset:last-of-type  =>부모 안에 있는 #signup fieldset 요소들 중, 맨 마지막 요소에

 

1,2 예시

①.navi 클래스 스타일에 a:hover 속성과 a:focus 속성을 추가한 것

②.top-menu li에 :last-child 속성과 a:hover 속성을 추가한 것

---

 

 

3. 가상 요소 - 클래스 이름 앞에 ::를 붙임

-화면에는 보이지만, 코드짤 때 불필요한 태그 사용하지 않기 위해 가상 요소를 씀

::first-line 요소 & ::first-letter 요소	-지정한 요소의 첫 번째 줄이나 or 첫 번째 글자에 스타일이 적용됨 (단, <p>태그 속 <br>태그 때문에 첫 번째 글자가 첫 번째 줄에 없을 경우에는 ::first-letter요소를 적용할 수 없음)
::before 요소 & ::after 요소	-둘중 하나를 사용하면, 지정한 요소의 앞뒤에 스타일을 (화면에) 추가할 수 있음

li 내부스타일 타입 요소에 .new::after를 추가한건가..?