| .class |
.intro |
클래스가 "intro"인 모든 요소를 선택한다 |
1 |
| #id |
#firstname |
ID "firstname"인 모든 요소를 선택한다 |
1 |
| * |
* |
모든 요소를 선택한다 |
2 |
| element |
p |
모든 <p> 요소를 선택한다 |
1 |
| element,element |
div,p |
모든 <div>, <p> 요소를 선택한다 |
1 |
| element element |
div p |
<div>에 있는 모든 <p> 요소를 선택한다 |
1 |
| element>element |
div>p |
부모가 <div>요소인 <p> 요소를 선택한다 |
2 |
| element+element |
div+p |
<div>요소 바로 다음에 추가되는 모든 <p> 요소를 선택한다 |
2 |
| [attribute] |
[target] |
target 속성이 있는 모든 요소를 선택한다 |
2 |
| [attribute=value] |
[taget=_blank] |
target 속성의 속성 값이 "_blank"인 모든 요소를 선택한다 |
2 |
| [attritube~=value] |
[title~=flower] |
title 속성의 속성 값이 "flower" 단어가 포함되는 모든 요소를 선택한다 |
2 |
| [attribute|=value] |
[lang|=en] |
lang 속성의 속성 값이 "en"으로 시작되는 모든 요소를 선택한다 |
2 |
| :link |
a:link |
방문하지 않은 모든 링크를 선택한다 |
1 |
| :visited |
a:visited |
방문한 모든 링크를 선택한다 |
1 |
| :active |
a:active |
활성화 중인 모든 링크를 선택한다 |
1 |
| :hover |
a:hover |
마우스 오버 중인 모든 링크를 선택한다 |
1 |
| :focus |
input:focus |
포커스가 있는 입력 요소를 선택한다 |
2 |
| :first-letter |
p:first-letter |
모든 <p> 요소의 첫 글자를 선택한다 |
1 |
| :first-line |
p:first-line |
모든 <p> 요소의 첫 번째 행을 선택한다 |
1 |
| :first-child |
p:first-child |
그 부모의 첫 번째 자식인 모든 <p> 요소를 선택한다 |
2 |
| :before |
p:before |
모든 <p> 요소의 컨텐츠 전에 내용을 삽입한다 |
2 |
| :after |
p:after |
모든 <p> 요소의 컨텐츠 다음에 내용을 삽입한다 |
2 |
| :lang(language) |
p:lang(it) |
lang 속성의 속성 값이 "it"으로 시작되는 모든 <p> 요소를 선택한다 |
2 |
| element1~element2 |
p~ul |
<p> 요소 이후에 나오는 모든 <ul> 요소를 선택한다 |
3 |
| [attribute^=value] |
a[src^="https"] |
<a> 요소 중 src 속성의 속성 값이 "https"로 시작되는 모든 요소를 선택한다 |
3 |
| [attribute$=value] |
a[src$=".pdf"] |
<a> 요소 중 src 속성의 속성 값이 ".pdf"로 끝나는 모든 요소를 선택한다 |
3 |
| [attribute*=value] |
a[src*="w3schools"] |
<a> 요소 중 src 속성의 속성 값이 "w3schools"가 포함되는 모든 요소를 선택한다 |
3 |
| :first-of-type |
p:first-of-type |
그 부모의 모든 첫 번째 <p> 요소를 선택한다 |
3 |
| :last-of-type |
p:last-of-type |
그 부모의 모든 마지막 번째 <p> 요소를 선택한다 |
3 |
| :only-of-type |
p:only-of-typ |
첫 번째 부모의 모든 <p> 요소를 선택한다 |
3 |
| :only-child |
p:only-child |
<p> 요소만 유일하게 갖는 부모의 <p> 요소를 선택한다 |
3 |
| :nth-child(n) |
p:nth-child(2) |
그 부모의 <p> 요소 중 모든 두 번째(상단부터) <p> 선택한다 |
3 |
| :nth-last-child(n) |
p:nth-last-child(2) |
그 부모의 <p> 요소 중 모든 두 번째(하단부터) <p> 선택한다 |
3 |
| :nth-of-type(n) |
p:nth-of-type(2) |
p:nth-child(2)과 동일한 기능을 한다 |
3 |
| :nth-last-of-type(n) |
p:nth-last-of-type(2) |
p:nth-last-child(2)과 동일한 기능을 한다 |
3 |
| :last-child |
p:last-child |
그 부모의 마지막 번째 자식인 모든 <p> 요소를 선택한다 |
3 |
| :root |
:root |
문서의 루트 요소를 선택한다 |
3 |
| :empty |
p:empty |
자식이 없는(텍스트 노드 포함) 모든 <p> 요소를 선택한다 |
3 |
| :target |
#news:target |
현재 활성화 된 #news 요소를 선택한다 |
3 |
| :enabled |
input:enabled |
input 요소의 disabled 속성이 enabled(default 값)로 된 모든 요소를 선택한다 |
3 |
| :disabled |
input:disabled |
input 요소의 disabled 속성이 disabled로 된 모든 요소를 선택한다 |
3 |
| :checked |
input:checked |
input 요소의 checked 속성이 된 모든 요소를 선택한다 |
3 |
| :not(selector) |
:not(p) |
<p> 요소가 아닌 모든 요소를 선택한다 |
3 |
| ::selection |
::selection |
사용자에 의해 선택된 요소의 부분을 선택한다 |
3 |