선택자(selector)의 종류

선택자(selector)의 종류

이름	예시	설명
공통 선택자	*	전체 요소 선택 = All
타입 선택자	div	해당 요소(div)의 전체
하위 선택자	div p	해당 요소(div)의 일치하는 전체 하위 요소(p)
자식 선택자	div > p	해당 요소(div)의 인접하는 하위 요소(p)
클래스 선택자	div.css	해당 요소(div)의 일치하는 class 값
아이디 선택자	div#id	해당 요소(div)의 일치하는 id 값

1) 공통 선택자

전체 요소를 선택한다.

단 모바일에서 적용되지 않는다.

2) 타입 선택자

타입 선택자가 div일 경우, div의 모든 요소를 가르키며, 기본값으로 지정된다.

3) 하위 선택자

하위 선택자가 div p일 경우, div의 안에 있는 하위 요소 p를 모두 가르킨다.

p의 부모가 div가 아닐 경우 해당되지 않는다.

4) 자식 선택자

자식 선택자가 div > p일 경우, div의 바로 인접하는 하위 요소 p를 가르킨다.

div 안에 다른 요소 없이 바로 p가 있을 경우에만 해당된다.

http://www.w3schools.com/cssref/tryit.asp?filename=trycss_sel_element_gt

5) 클래스 선택자

div의 class이름이 일치할 경우

div .class는 div 안에 있는 class를 선언하는 것이므로 다르다.

div.class  div .class

6) 아이디 선택자

div의 id가 일치할 경우

div #id는 div 안에 있는 id를 선언하는 것이므로 다르다.

div#id  div #id