[CSS] CSS 선택자 ( selector )

CSS의 selector는 jQuery에서 사용하면서, 요즘 가장 많이 사용되고 있는 seletor가 되었습니다.

CSS의 selector는 여러개의 Element와 attritube와 class등을 이용해서 다양한 방법으로 선택가능합니다.

 

CSS 선택자 selector

 

선택자(Selector)

선택자는 Type(element),Universal(*),class/id,attribute(속성),가상요소/가상클래스,선택자결합(하위,자식,인접) 등으로 구성된다.

Pattern	Meaning	S5	C8	F3.6	O11	I9b	I8	I7	I6
#id	id로 지정된 요소 선택	O	O	O	O	O	O	O	O
.class	class로 지정된 요소 선택	O	O	O	O	O	O	O	O
E	E 요소를 선택	O	O	O	O	O	O	O	O
E:link	방문하지 않은 E를 선택	O	O	O	O	O	O	O	O
E:visited	방문한 E를 선택	O	O	O	O	O	O	O	O
E:hover	마우스가 올라가 있는 동안 E를 선택	O	O	O	O	O	O	O	O
E:active	마우스 클릭 또는 키보드(enter)가 눌린 동안 E를 선택	O	O	O	O	O	O	O	X
E:focus	focus가 머물러 있는 동안 E를 선택	O	O	O	O	O	O	X	X
E:first-line	E 요소의 첫 번째 라인 선택	O	O	O	O	O	O	O	X
E:first-letter	E 요소의 첫 번째 문자 선택	O	O	O	O	O	O	O	X
*	모든 요소 선택	O	O	O	O	O	O	O	O
E[foo]	‘foo’ 속성이 포함된 E를 선택	O	O	O	O	O	O	O	X
E[foo="bar"]	‘foo’ 속성의 값이 ’bar’와 일치하는 E를 선택	O	O	O	O	O	O	O	X
E[foo~="bar"]	‘foo’ 속성의 값에 ’bar’가 포함되는 E를 선택	O	O	O	O	O	O	O	X
E[foo|="en"]	‘foo’ 속성의 값이 ’en’ 또는 ’en-’ 으로 시작되는  E를 선택	O	O	O	O	O	O	O	X
E:first-child	첫 번째 자식 요소가 E라면 선택	O	O	O	O	O	O	O	X
E:lang(fr)	HTML lang 속성의 값이 ’fr’로 지정된 E를 선택	O	O	O	O	O	O	X	X
E::before	E 요소 전에 생성된 요소 선택	O	O	O	O	O	O	X	X
E::after	E 요소 후에 생성된 요소 선택	O	O	O	O	O	O	X	X
E>F	E 요소의 자식인 F 요소 선택	O	O	O	O	O	O	O	X
E+F	E 요소를 뒤의 F 요소 선택	O	O	O	O	O	O	O	X
E[foo^="bar"]	‘foo’ 속성의 값이 ’bar’로 정확하게 시작하는 요소 선택	O	O	O	O	O	O	O	X
E[foo$="bar"]	‘foo’ 속성의 값이 ’bar’로 정확하게 끝나는 요소 선택	O	O	O	O	O	O	O	X
E[foo*="bar"]	‘foo’ 속성의 값에 ’bar’를 포함하는 요소 선택	O	O	O	O	O	O	O	X
E:root	문서의 최상위 루트 요소 선택	O	O	O	O	O	X	X	X
E:nth-child(n)	그 부모의 n번째 자식이 앞으로부터 지정된 순서와 일치하는 E 라면 선택	O	O	O	O	O	X	X	X
E:nth-last-child(n)	n번째 자식이 뒤로부터 지정된 순서와 일치하는 요소가 E 라면 선택	O	O	O	O	O	X	X	X
E:nth-of-type(n)	E 요소 중 앞으로부터 순서가 일치하는 n번째 E 요소 선택	O	O	O	O	O	X	X	X
E:nth-last-of-type(n)	E 요소 중 끝으로부터 순서가 일치하는 n번째 E 요소 선택	O	O	O	O	O	X	X	X
E:last-child	E 요소 중 마지막 자식이라면 E 선택	O	O	O	O	O	X	X	X
E:first-of-type	E 요소 중 첫번째 E 선택	O	O	O	O	O	X	X	X
E:last-of-type	E 요소 중 마지막 E 선택	O	O	O	O	O	X	X	X
E:only-child	E 요소가 유일한 자식이면 선택	O	O	O	O	O	X	X	X
E:only-of-type	E 요소가 같은 타입이면 선택	O	O	O	O	O	X	X	X
E:empty	텍스트 및 공백을 포함하여 빈 자식을 가진 E를 선택	O	O	O	O	O	X	X	X
E:target	E의 URI의 대상이 되면 선택	O	O	O	O	O	X	X	X
E:enabled	활성화된 폼 컨트롤 E요소 선택	O	O	O	O	O	X	X	X
E:disabled	비활성화된 폼 컨트롤 E요소 선택	O	O	O	O	O	X	X	X
E:checked	선택된 폼 컨트롤(라디오버튼,체크박스)을 선택	O	O	O	O	O	X	X	X
E:not(s)	s가 아닌 E 요소 선택	O	O	O	O	O	X	X	X
E~F	E 요소가 앞에 존재하면 F를 선택	O	O	O	O	O	O	O	X

<표 1> 

CSS

 버전에 따른 선택자의 종류와 브라우저별 지원여부 – CSS1 – CSS2 – CSS3

참조:

• Selector – W3C
• S5 – Safari 5
• F3.6 – Mozilla FireFox 3.6.x
• O11 – Opera 11
• I9 – Internet Explorer MSDN

 

 

벤더 별 확장 속성 및 브라우저 엔진

대부분의 브라우저 벤더들은 자신들의 브라우저가 현재 지원하는 속성이 표준과 상이하거나 변경될 수 있다라고 생각하고 벤더확장 속성을 만들었다.
실제로 속성을 지원하지만 100% 표준스펙이 나온 상태가 아니기 때문에 개선점이나 버그발생시 피드백을 쉽게 하기 위해 만든 것으로 보인다.

브라우저 밴더	S5	C8	F3.6	O11	I9	I8	I7	I6
벤더확장 속성	-webkit-	-webkit-	-moz-	-o-	-ms-/filter	-ms-/filter	-ms-/filter	-ms-/filter
브라우저 엔진	Webkit	Webkit	Gecko	Presto	Tasman

<표 2> 브라우저 벤더 별 확장 속성

 

이번 연재에서 다룰 CSS3주요속성

CSS3에는 정말 다양한 속성들이 공개 되었는데 CSS의 기존버전과는 다르게 모듈형태로 개발되고 있다.
이것은 각종 브라우저나 다양한 디바이스가 필요에 따라 원하는 

CSS

 모듈만을 탑재하거나 특정 모듈만을 빠르게 업데이트 할 수 있는 장점이 있다.
CSS3는 현재 Text, Fonts, Color, Backgrounds&Borders, Transforms, Transitions, Animations과 같은 종류의 모듈들을 개발하고 있다.
그 모듈형태의 CSS3 여러 속성 중에서 이번 연재에서 배워볼 CSS3 주요속성은 아래와 같다.

Module	Attribute	Effect	S5	C8	F3.6	O11	I9	I8	I7	I6
Background &border	border-image	테두리 이미지효과	O	O	O	O	X	X	X	X
	border-radius	테두리 라운드효과	O	O	O	O	O	X	X	X
	box-shadow	박스 그림자	O	O	O	O	O	X	X	X
	multiple backgrounds	배경 여러개 넣기	O	O	O	O	O	X	X	X
	radient	그라디언트 효과	O	O	O	X	X	X	X	X
Color	rgba(R,G,B,A)/HSLA	칼라와 투명도효과	O	O	O	O	O	X	X	X
	opacity	이미지 투명도효과	O	O	O	O	X	X	X	X
Text	text-shadow	글자 그림자효과	O	O	O	O	X	X	X	X
	text-overflow	글자 넘칠 때 자동 개행	O	O	X	O	O	O	O	O
User-Interface	resize	박스 사이즈 조절효과	O	O	O	O	X	X	X	X
Other modules	multi-column layout	문단 다중 칼럼효과	O	O	O	O	X	X	X	X

<표 3> 본 연재에서 배울 CSS3 속성

IE(6~8)에서는 공식적으로 지원하지 않는 부분은 X 표시가 되어 있지만 대부분 필터를 이용해 효과를 낼 수 있으며 다른 브라우저들은 벤더확장 속성을 이용하여 적용 가능하다.

 

 

 

출처: CSS선택자(Selector)의 종류 및 간단한 효과주기