1. 연결선택자
- 하위선택자 => section p { ..... }
상위요소 하위요소
- 자식선택자 => section > p { .... }
부모요소 > 자식요소
- 인접 형제 선택자 => h1 + p { .... }
*h1요소와 형제인 첫 번째 p요소만 선택하여 글자를 파란색으로 적용
- 형제 선택자 => h1 ~ p { color: blue; }
*h1 요소 뒤에 오는 모든 형제 p 요소에 적용
2. 속성 선택자
종류 | 선택 요소 | 예시 |
[속성] | 해당 속성이 있는 요소 | [required] |
[속성 = 값] | 지정한 속성값이 있는 요소 | [target = _blank] |
[속성 ~= 값] | 지정한 속성값이 포함된 요소(단어별) | [class ~= button] |
[속성 |= 값] | 지정한 속성값이 포함된 요소(하이픈 포함, 단어별) | [title |= us] |
[속성 ^= 값] | 지정한 속성값으로 시작하는 요소 | [title ^= eng] |
[속성 $= 값] | 지정한 속성값으로 끝나는 요소 | [href $= xls] |
[속성 *= 값] | 지정한 속성값의 일부가 일치하는 요소 | [href *= w3] |
3. 가상 클래스
종류 | 설명 |
:link | 방문하지 않는 링크에 스타일을 적용 |
:visited | 방문했던 링크에 스타일을 적용함 |
:hover | 지정한 요소에 마우스 포인터를 올려놓을 때 스타일 적용 |
:active | 지정한 요소를 활성화 했을 때 적용 |
:focus | 지정한 요소에 초점이 맞춰졌을 때 스타일 적용 |
:target | 앵커 대상에 스타일을 적용함 |
:enabled | 지정한 요소를 사용할 수 있는 상태일 때 스타일 적용 |
:disabled | 지정한 요소를 사용할 수 없는 상태일 때 스타일 적용 |
:checked | 선택한 요소의 스타일을 적용 |
:not | 지정한 요소가 아닐 때 선택해서 스타일 적용 |
주의 !!! 순서를 지켜 적용하자
:link
:visited
:hover
:active
4. 구조 가상 클래스(순서에 따른 가상클래스)
선택자 | 설명 |
:only-child | 부모 안 자식 요소가 하나뿐일 때 자식 요소 선택 |
A:only-type-of | 부모 안에 A 요소가 하나뿐일 때 선택 |
:first-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번째 요소 선택 |
05 가상요소(:: 2개있는것)
선택자 | 설명 |
::first-line | 첫 번째 줄을 선택함 |
::first-letter | 줄에서 첫 번째 글자를 선택함 |
::before | 특정 요소의 앞에 내용이나 스타일을 추가함 |
::after | 특정 요소의 뒤에 내용이나 스타일을 추가함 |