1. 기본 선택자
* {}
div {}
.checked {}
#basic {}
h1, h2, h3 {}
2. 연결 선택자
section h1 {}
section > h1 {}
section + h1 {}
section ~ h1 {}
- 하위 선택자 : 상위요소에 포함된 모든 하위 요소를 선택한다.
- 자식 선택자 : 부모 요소에 포함된 자식 요소만 선택한다.
- 인접 형제 선택자 : section 이후 가장 먼저 오는 형제 요소 h1를 선택한다.
- 형제 선택자 : section과 형제인 모든 h1를 선택한다.
3. 속성 선택자
[autofocus] {}
[target = _blank] {}
[class ~= button] {}
[title |= us] {}
[title ^= eng] {}
[href $= xls] {}
[href *= w3] {}
- [속성] : 해당 속성이 있는 요소
- [속성 = 값] : 지정한 속성값이 있는 요소를 선택한다.
- [속성 ~= 값] : 지정한 속성값이 포함된 요소를 선택한다.
- [속성 |= 값] : 지정한 속성값이 포함된 요소를 선택한다. (하이픈 포함)
- [속성 ^= 값] : 지정한 속성값으로 시작하는 요소를 선택한다.
- [속성 $= 값] : 지정한 속성값으로 끝나는 요소를 선택한다.
- [속성 *= 값] : 지정한 속성값의 일부가 일치하는 요소를 선택한다.
4. 가상 클래스
- :link : 방문하지 않은 링크에 스타일을 적용한다.
- :visited : 방문했던 링크에 스타일을 적용합니다.
- :hover : 지정한 요소에 마우스 포인터가 hover될 때 스타일을 적용한다.
- :active : 지정한 요소가 활성화 되었을 때 스타일을 적용한다.
- :focus : 지정한 요소에 초점이 맞춰졌을 때 스타일을 적용한다.
- :target : 앵커 대상에 스타일을 적용한다.
- :enabled : 지정한 요소를 사용할 수 있는 상태 일 때 스타일을 적용한다.
- :disabled : 지정한 요소를 사용할 수 없는 상태 일 때 스타일을 적용한다.
- :checked : 선택한 요소의 스타일을 적용한다.
- :not : 지정한 요소가 아닐 때 선택해서 스타일을 적용한다.
5. 구조 가상 클래스
- :only-child : 부모 안에 자식 요소가 하나뿐일 때 자식 요소를 선택한다.
- A:only-type-of : 부모 안에 A요소가 하나뿐일 때 선택한다.
- :firt-child : 부모 안에 있는 모든 요소 중에서 첫 번째 자식 요소를 선택한다.
- :last-child : 부모 안에 있는 모든 요소 중에서 마지막 자식 요소를 선택한다.
- A:first-of-type : 부모 안에 있는 A요소 중에서 첫 번째 요소를 선택한다.
- A:last-of-type : 부모 안에 있는 A요소 중에서 마지막 요소를 선택한다.
- :nth-child(n) : 부모 안에 있는 모든 요소 중에서 n번째 자식 요소를 선택한다.
- :nth-last-child(n) : 부모 안에 있는 모든 요소 중에서 끝에서 n번째 자식 요소를 선택한다.
- A:nth-of-type(n) : 부모 안에 있는 A요소 중에서 n번째 요소를 선택한다.
- A:nth-last-of-type(n) : 부모 안에 있는 A 요소 중에서 끝에서 n번째 요소를 선택한다.
6. 가상 요소
- ::first-line : 첫번째 줄을 선택한다.
- ::first-letter : 줄에서 첫번째 글자를 선택한다.
- ::before : 특정 요소의 앞에 내용이나 스타일을 추가한다.
- ::after : 특정 요소의 뒤에 내용이나 스타일을 추가한다.