완벽한 CSS3 선택자 총정리
CSS3를 잘 활용하기 위해서는 먼저 선택자를 확실히 알고 넘어가야 합니다. 선택자란 내가 손을 보고자 원하는 HTML테그를 정확히 집어내는 것을 말합니다.
자주 사용하는 선택자의 경우는 잃어버릴 일이 거의 없지만 자주 사용하지 않는 선택자는 잘 생각이 나지 않는경우가 많습니다. 그것을 대비해서 일단 CSS3의 선택자를 정리해 놓으려고 합니다. 제가 잘 활용하려고 정리하는 목적이 크지만 처음보시는 분도 도움이 될 수 있도록 정리해 놓겠습니다.
선택자는 기본 선택자, 속성 선택자, 상태 선택자로 나눌수 있습니다.
기본 선택자
가장 기본이 되는 선택자로 CSS를 다루시는 분이라면 반드시 알아야 하는 선택자 입니다.
| 서식 | 설명 | CSS버전 |
|---|---|---|
| * | 모든 요소 선택 | 2 |
| E | 태그명이 E인 요소 선택 | 1 |
| #myIDname | id 속성값이 “myIDname”인 모든 요소 선택 | 1 |
| .myClassname | class 속성값이 “myClassname”인 모든 요소 선택 | 1 |
| E, F | 모든 E 요소와 모든 F 요소 선택 | 1 |
| E F | E 요소의 자손 요소 중 모든 F 요소 선택 | 1 |
| E > F | E 요소의 자식 요소 중 F 요소 선택 | 2 |
| E + F | 형제 요소 중 E 요소 바로 뒤에 있는 F 요소 한개 선택 | 2 |
| E ~ F | 형제 요소 중 E 요소 뒤에 있는 F 요소 모두 선택 | 3 |
속성 선택자
태그의 속성요소로 선택할 수 도 있습니다.
속성요소는 기본 선택자에서 대괄호([]) 를 이용하여 선택합니다.
| 서식 | 설명 | CSS레벨 |
|---|---|---|
| E[attr] | E 요소 중 ‘attr’ 속성이 포함된 요소 선택 | 2 |
| E[attr=”val”] | E 요소 중 ‘attr’ 속성의 값이 정확하게 ‘val’과 일치하는 요소 선택 | 2 |
| E[attr~=”val”] | E 요소 중 ‘attr’ 속성의 값에 ‘val’이(공백으로 구분) 포함되는 요소 선택 | 2 |
| E[attr^=”val”] | E 요소 중 ‘attr’ 속성의 값이 ‘val’으로 시작하는 요소 선택 | 3 |
| E[attr$=”val”] | E 요소 중 ‘attr’ 속성의 값이 ‘val’으로 끝나는 요소 선택 | 3 |
| E[attr*=”val”] | E 요소 중 ‘attr’ 속성의 값에 ‘val’이 포함되는 요소 선택 | 3 |
| E[attr | =”val”] | E 요소 중 ‘attr’ 속성의 값이 ‘val’ 이거나 ‘val’로 시작하고 뒤에 하이픈(-)이 있는 모든 요소 선택 |
상태/구조/기타 선택자
상태나 구조, 언어, 부정 등 그 외의 선택자들 입니다.
기본 선택자에서 콜론(:) 뒤 요소를 작성헙니다.
| 서식 | 설명 | CSS레벨 |
|---|---|---|
| E::link | E 요소 중 방문하지 않은 링크 선택 | 1 |
| E::visited | E 요소 중 방문한 링크 선택 | 1 |
| E::active | E 요소 중 마우스 클릭 또는 키보드 엔터가 눌린 동안 선택 | 1, 2 |
| E::hover | E 요소 중 마우스가 올라가 있는 동안 선택 | 1, 2 |
| E::focus | E 요소 중 포커스가 머물러 있는 동안 선택 | 1, 2 |
| E::before | E 요소 중 시작 지점에 생성된 요소 선택 | 2 |
| E::after | E 요소 중 끝 지점에 생성된 요소 선택 | 2 |
| E::root | 문서의 최상위 요소(html) 선택 | 3 |
| E::nth-child(n) | E 요소 중 앞으로부터 지정된 순서와 일치하는 요소 선택 (E 아닌 요소의 순서가 계산에 포함) | 3 |
| E::nth-last-child(n) | E 요소 중 뒤로부터 지정된 순서와 일치하는 요소 선택 (E 아닌 요소의 순서가 계산에 포함) | 3 |
| E::nth-of-type(n) | E 요소 중 앞으로부터 순서가 일치하는 요소 선택 (E 요소의 순서만 계산에 포함) | 3 |
| E::nth-last-of-type(n) | E 요소 중 끝으로부터 순서가 일치하는 요소 선택 (E 요소의 순서만 계산에 포함) | 3 |
| E::first-child | E 요소 중 첫 번째 등장하는 요소 선택 (E 아닌 요소의 순서가 계산에 포함) | 2 |
| E::last-child | E 요소 중 마지막에 등장하는 요소 선택 (E 아닌 요소의 순서가 계산에 포함) | 3 |
| E::first-of-type | E 요소 중 첫 번째 E 요소 선택 (E 요소의 순서만 계산에 포함) | 3 |
| E::last-of-type | E 요소 중 마지막 E 요소 선택 (E 요소의 순서만 계산에 포함) | 3 |
| E::only-child | E 요소가 유일한 자식이면 선택 (E 아닌 요소가 하나라도 포함되면 선택하지 않음) | 3 |
| E::only-of-type | E 요소가 유일한 타입이면 선택 (E 아닌 요소가 포함되어도 E 타입이 유일하면 선택) | 3 |
| E::empty | E 요소 중 텍스트 및 공백을 포함하여 자식 요소가 없는 요소 선택 | 3 |
| E::lang(ko) | HTML lang 속성의 값이 ‘ko’으로 지정된 요소 선택 | 2 |
| E::not(S) | E 요소 중 S가 아닌 요소 선택 | 3 |
| E::enabled | E 요소 중 사용 가능한 폼 콘트롤(input, textarea, select, button) 요소 선택 | 3 |
| E::disabled | E 요소 중 사용 불가능한 폼 콘트롤(input, textarea, select, button) 요소 선택 | 3 |
| E::checked | E 요소 중 선택된 폼 콘트롤(input checked=”checked”) 선택 | 3 |
| E::target | E의 URI가 요청되면 선택 (E 요소의 ID가 지정되어야 함) | 3 |
| E::first-line | E 요소 중 첫 번째 라인 선택 | 1 |
| E::first-letter | E 요소 중 첫 번째 문자 선택 | 1 |
