본문 바로가기
반응형

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
728x90

UX 공작소

고급지게 만들어 저렴하게 배포는 공작소