| 명칭 | 예시 | 내용 |
|---|---|---|
| 가상요소 ( :: ) | li::first-letter | 존재하지 않는 요소를 존재하는 것처럼 사용 (:: pseudo-element) |
| 가상클래스( : ) | li:first-child | 클래스를 지정하지 않고 클래스를 지정한 것처럼 사용 (: pseudo-class) |
※ 하나의 html 요소에 여러개의 여거개의 가상요소를 적용가능하다.
| 가상요소 | 예제 | 내용 |
|---|---|---|
| ::before | p::before | 요소의 content 바로 앞에 가상요소를 삽입한다. |
| ::after | p::after | 요소의 content 바로 뒤에 가상요소를 삽입한다. |
| ::first-letter | p::first-letter | 요소의 첫번째 글자를 선택한다. |
| ::first-line | p::first-line | 요소가 여러라인에 걸쳐 표시될때, 첫번째 라인을 선택한다. |
| ::selection | p::selection | 사용자가 마우스등으로 선택한 부분에 적용 |
| ::maker | p::maker | 숫자,모양등으로 마크된 부분에 적용한다. (li...) |
| ::placeholder | p::placeholder | input 필드의 힌트 문자열에 적용한다. |
| 가상클래스 | 예제 | 내용 |
|---|---|---|
| :link | a:link | 방문하지 않은 링크를 표시 |
| :visited | a:visited | 방문한 링크를 표시 |
| :hover | a:hover | 사용자가 해당 요소에 커서를 가져다 댔을 때 |
| :active | a:active | 요소가 활성화 되었거나 클릭 되었을 때 |
| :focus | a:focus | 해당 요소에 키보드 포커스가 맞춰졌을 때 |
| 가상클래스(예제) | 내용 |
|---|---|
| p:first-child | 존재하는 모든 부모들중 첫번째 요소는 전부 다 선택 ※ 부모의 1번 child가 p가 아닌 경우 제외, 즉, 첫번째가 span 일경우 해당없음 |
| p:first-of-type | 자식요소중 p가 존재하면 첫번째 요소는 전부 다 선택 ※ p가 부모의 1번 요소가 아니어도 맨처음 p요소가 포함, 즉, 자식요소에 span 다음에 p 가 올경우도 처음 p가 선택됨 |
| p:last-child | 존재하는 모든 부모들중 마지막 요소는 전부다 (부모의 마지막 child가 p가 아닌 경우 제외) |
| p:last-of-type | 자식요소중 p가 존재하면 마지막 요소는 전부다 (p가 부모의 마지막 요소가 아니어도 뒤에서 맨처음 p요소가 포함) |
| p:nth-child(n) p:nth-child(3n+1) p:nth-child([even|odd]) | 부모의 n번째 child가 p 이면 해당 (자식요소들 모두를 생각하고 선택) 3n+1 = 1,4,7,10,... |
| p:nth-of-type(n) | 부모의 자식중 p아닌거 제외한 자식 중 n번째 p만 (자식중 p인 요소만을 생각함) |
| p:nth-last-child(n) | 마지막 요소가 p일경우 |
| p:nth-last-of-type(n) | 자식요소에 p 가 존재할 경우, 맨 마지막 p (타요소 존재여부 관계없음) |
| p:only-child | 부모밑에 나만있을경우(자식요소가 오직 p 하나만 있을때 선택됨) |
| p:only-of-type | 부모밑에 p가 1개일 경우 (다른 요소는 있어도 됨) |
| 가상클래스 | 내용 |
|---|---|
| :checked | 체크되어 있는거 (체크박스, 라디오박스) |
| :disabled | disabled 된 요소 |
| :enabled | disabled 안된 모든 입력요소들이 해당 |
| :focus | 해당 요소에 키보드 포커스가 맞춰졌을 때 |
| :read-only | readonly 인거 |
| :read-write | readonly가 아닌거 |
| :required | required 인거 |
| :optional | required 가 아닌거 |
| :invalid | type을 email등 설정시 값이 유효하지 않은 것 |
| :valid | 설정값이 type에 맞게 유효한 값이 설정되어 있는 것 |
| :in-range | min,max 등 설정시 값이 범위내 유효한 경우 |
| :out-of-range | min,max 등 설정시 값이 범위내 유효하지 않은 경우 |
| 가상클래스 | 내용 |
|---|---|
| p:empty | 요소내부가 비어있는 것을 찾는다. (공백도 없을것) |
| ul li:not(.active) | ul아래 li중 클래스가 active가 아닌 것 |
| :root | document 의 root element |