css selector (css 선택자) 문법

아래표 출처 : http://htmlcss.kr/css/css-selector/

선택자	설명	CSS
.class	class=”class”의 모든 요소를 선택	1
#id	id=”id”의 모든 요소를 선택	1
*	전체 선택자 – 모든 요소를 선택	2
element	요소 선택자 – 지정된 요소를 선택	1
element,element	요소 선택자 – 선택할 요소를 여러 개 지정	1
element element	자손 선택자 – 지정된 상위 요소 아래의 지정된 모든 하위 요소 선택	1
element>element	자식 선택자 – 지정된 상위 요소 바로 아래의 지정된 하위 요소만 선택	2
element + element	인접 선택자 – 지정된 요소와 같은 레벨의 바로 다음 요소 선택	2
[attribute]	속성 선택자 – 지정된 속성 가진 요소를 모두 선택	2
[attribute=value]	속성 값 선택자 – 지정된 속성의 값을 가진 요소를 모두 선택	2
[attribute~=value]	속성 값 선택자 – 지정된 속성에 지정된 값이 포함된 요소를 모두 선택	2
[attribute|=language]	속성 값 선택자 – 지정된 속성에 지정된 단어로 시작되는 요소를 모두 선택	2
:link	링크 선택자 – 모든 링크를 선택	1
:visited	링크 선택자 – 방문된 링크만 모두 선택	1
:active	링크 선택자 – 활성화된 링크만 모두 선택	1
:hover	링크 선택자 – 마우스오버된 링크만 모두 선택	1
:focus	링크 선택자 – input 요소의 포커스 된 요소를 선택	2
:first-letter	가상 선택자 – 지정된 요소의 첫 번째 문자를 선택	1
:first-line	가상 선택자 – 지정된 요소의 첫 번째 줄을 선택	1
:first-child	가상 선택자 – 지정된 요소의 첫 번째 하위(자식) 요소를 선택	2
:before	가상 선택자 – 지정된 요소의 앞 부분을 선택	2
:after	가상 선택자 – 지정된 요소의 뒷 부분을 선택	2
:lang(language)	가상 선택자 – 지정된 요소 중 언어가 괄호 안의 지정된 언어로 시작되는 요소를 선택	2

대략 위와 같이 css 기본 selector 문법이 이뤄집니다.

단,

element element

와

element > element

가 혼돈될수 있습니다.

만일, css의 selector가 div p로 되어 있다면, div 하부의 모든 p가 적용된다는 뜻입니다.

즉, div -> span -> p 도 적용을 받습니다.

단, div > p로 되어 있다면, div -> p만 적용받습니다. 즉, div -> span -> p는 해당되지 않습니다.

그러니, 특별한 경우를 제외하고는 element > element가 주로 사용될 수 있다는점, 이것이 중요할 듯 합니다.