반응형
Front-end개발을 한다고 하면서 CSS3를 사용하는데.. 주로 사용하는 선택자들은 쉽게 사용하는데.. 많이 사용하지 않는 선택자에 대해서는 가끔씩 잊어버리거나 사용법을 잊어버리는 경우가 있습니다. 그래서 항상 참조할 수 있게 간단히 정리를 해 보려고 합니다.
선택자는 크게 기본 선택자, 속성 선택자, 상태 선택자로 나눌수 있습니다.
기본 선택자
CSS3를 다루기 위해서는 반드시 알아야 하는 선택자 입니다.
| 서식 | 설명 | 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 |
상태/구조/기타 선택자
상태나 구조, 언어, 부정등 그 외의 선택자들 입니다.
콜론(:) 뒤 요소를 작성헙니다.
| 서식 | 설명 | 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 |
