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