CSS 선택자 활용
일반 선택자
| 선택자명 | 선택 범위 | 표현식 | |
| 전체 선택자 | HTML 문서 내 모든 element | * {} | |
| 타입 선택자 | 매칭되는 element 선택 | h1, h2, h3 {} | |
| 클래스 선택자 | class 속성 값과 매칭되는 element 선택 | .className {} | |
| ID 선택자 | id 속성 값과 매칭되는 element 선택 | #idName {} | |
복합 선택자
| 선택자명 | 선택 범위 | 표현식 | |
| 하위 선택자 | 하위 element 선택 (얼마의 깊이가 차이나든 하위에 있다면 모두 선택) | E1 E2 {} | |
| 자식 선택자 | 직속 하위 element 선택 (바로 내 밑의 깊이에서만 선택) | E1 > E2 {} | |
| 인접 형제 선택자 | 인접 형제 관계인 element 선택 (바로 내 뒤의 형제만 선택) | E1 + E2 {} | |
| 일반 형제 선택자 | 형제 관계인 element 선택 (내 뒤의 모든 형제를 선택) | E1 ~ E2 {} | |
가상 클래스 선택자
| 선택자 표현식 | 선택 범위 |
| :link | 방문하지 않은 링크를 선택 (한번 방문하지 않은 링크의 글씨 색을 지정) |
| :visited | 방문한 링크를 선택 (한번 방문한 링크의 글씨 색을 지정) |
| :hover | 지정된 요소에 마우스가 올라간 경우 선택 선택 |
| :active | 지정된 요소가 활성화 된 경우 선택 |
| :focus | 지정된 요소가 포커스를 가질 경우 선택 |
| :first-child | 지정된 요소 중 부모의 첫 번째 자식 선택 |
| :last-child | 지정된 요소 중 부모의 마지막 자식 선택 |
| :nth-child(상수 혹은 n으로 된 수열) | 지정된 요소 중 n번째 자식 선택 |
| :enabled | 지정된 요소가 enabled인 경우 선택 |
| :disabled | 지정된 요소가 disabled인 경우 선택 |
| :checked | 지정된 요소가 checked인 경우 선택 |
가상 엘리먼트 선택자 : 현재 보이지 않는 가상의 엘리먼트를 선택
| 선택자 표현식 | 선택 범위 |
| ::after | 지정된 요소 뒤에 content 추가 |
| ::before | 지정된 요소 앞에 content 추가 |
| ::first-letter | 지정된 요소의 첫 번째 문자 선택 |
| ::first-line | 지정된 요소의 첫 번째 라인 선택 |
| ::selection | 사용자에 의해 선택된 요소의 위치 선택 |
속성 선택자
| 선택자 표현식 | 선택 범위 |
| [A] | A 속성이 포함된 엘리먼트 선택 |
| [A=V] | A 속성 값이 V와 정확히 일치하는 엘리먼트 선택 |
| [A~=V] | A 속성 값이 V 단어를 포함하는 엘리먼트 선택 |
| [A^=V] | A 속성 값이 V로 시작하는 엘리먼트 선택 |
| [A*=V] | A 속성 값이 V를 포함하는 엘리먼트 선택 |
| [A&=V] | A 속성 값이 V로 끝나는 엘리먼트 선택 |
| [A|=V] | A 속성 값이 정확히 V이거나 V-로 시작하는 엘리먼트 선택 |
