본문 바로가기
반응형

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

나만모르는 이야기

여행, 맛집,IT, 리뷰에 대한 이야기를 공유하는 블로그 .