| Selector
|
Example
|
Example description
|
CSS
|
.class
|
.intro
|
class="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
|
element1~element2
|
p ~ ul
|
<p> 다음에 나오는 모든 <ul> 요소들
|
3
|
[attribute]
|
[target]
|
target 속성을 가지고 있는 요소들
|
2
|
[attribute=value]
|
[target=_blank]
|
target="_blank" 속성을 가지고 있는 요소들
|
2
|
[attribute~=value]
|
[title~=flower]
|
title 속성의 값에 "flower"라는 단어를 포함하는 요소들
|
2
|
[attribute|=value]
|
[lang|=en]
|
lang 속성의 값이 "en"으로 시작하는 요소들
|
2
|
[attribute^=value]
|
a[href^="https"]
|
href 속성의 값이 "https"로 시작하는 요소들
|
3
|
[attribute$=value]
|
a[href$=".pdf"]
|
href 속성의 값이 ".pdf"로 끝나는 요소들
|
3
|
[attribute*=value]
|
a[href*="w3schools"]
|
href 속성의 값이 "w3schools" 문자열을 포함하는 요소들
|
3
|
:active
|
a:active
|
활성 링크(Active link)를 가지고 있는 a 요소
|
1
|
::after
|
p::after
|
<p> 요소 앞에 있는 가상 영역 (실제로는 없는 영역)
|
2
|
::before
|
p::before
|
<p> 요소 뒤에 있는 가상 영역 (실제로는 없는 영역)
|
2
|
:checked
|
input:checked
|
체크된 <input> 요소들
|
3
|
:disabled
|
input:disabled
|
비활성화된 <input> 요소들
|
3
|
:empty
|
p:empty
|
자식 요소나 본문이 없는 <p> 요소들
|
3
|
:enabled
|
input:enabled
|
활성되어 있는 <input> 요소들
|
3
|
:first-child
|
p:first-child
|
부모 요소의 자식 요소들 중 첫 번째 자식인 <p> 요소
|
2
|
::first-letter
|
p::first-letter
|
<p> 요소의 본문 중 첫 번째 문자
|
1
|
::first-line
|
p::first-line
|
<p> 요소의 본문 중 첫 번째 줄
|
1
|
:first-of-type
|
p:first-of-type
|
부모 요소의 <p> 자식 요소들 중에서 첫 번째 자식 요소
|
3
|
:focus
|
input:focus
|
현재 석택된 혹은 입력 받고 있는 <input> 요소
|
2
|
:hover
|
a:hover
|
화면 상에서 마우스 포인터가 위로 올라온 <a> 요소
|
1
|
:in-range
|
input:in-range
|
특정 범위 안에 포함된 값을 가지는 <input> 요소들
|
3
|
:invalid
|
input:invalid
|
유효하지 않은 값을 가지는 <input> 요소들
|
3
|
:lang(language)
|
p:lang(it)
|
lang 속성이 it인 <p> 요소들
|
2
|
:last-child
|
p:last-child
|
부모 요소의 자식 요소들 중 마지막 자식인 <p> 요소
|
3
|
:last-of-type
|
p:last-of-type
|
부모 요소의 <p> 자식 요소들 중에서 마지막 자식 요소
|
3
|
:link
|
a:link
|
방문하지 않은 링크를 가지는 <a> 요소들
|
1
|
:not(selector)
|
:not(p)
|
<p> 요소가 아닌 요소들
|
3
|
:nth-child(n)
|
p:nth-child(2)
|
부모 요소의 두 번째 자식 요소인 <p> 요소
|
3
|
:nth-last-child(n)
|
p:nth-last-child(2)
|
부모 요소의 자식 요소들 중 마지막에서 두 번째 자식 요소인 <p> 요소
|
3
|
:nth-last-of-type(n)
|
p:nth-last-of-type(2)
|
부모 요소의 <p> 자식 요소들 중 마지막에서 두 번째 자식 요소인 <p> 요소
|
3
|
:nth-of-type(n)
|
p:nth-of-type(2)
|
부모 요소의 <p> 자식 요소들 중 두 번째 자식 요소인 <p> 요소
|
3
|
:only-of-type
|
p:only-of-type
|
부모 요소의 자식 요소들 중 유일한 <p> 요소인 <p> 요소[1]
|
3
|
:only-child
|
p:only-child
|
부모 요소의 자식 요소가 자신만 있는 <p> 요소
|
3
|
:optional
|
input:optional
|
"required"(필수적인) 속성이 없는 선택적인(optional) <input> 요소들
|
3
|
:out-of-range
|
input:out-of-range
|
특정 범위를 벗어나는 값을 가지는 <input> 요소들
|
3
|
:read-only
|
input:read-only
|
"readonly"(읽기 전용) 속성을 가지고 있는 <input> 요소들
|
3
|
:read-write
|
input:read-write
|
"readonly" 속성이 없는 <input> 요소들
|
3
|
:required
|
input:required
|
"required" 속성을 가지고 있는 <input> 요소들
|
3
|
:root
|
:root
|
문서의 최상위(root) 요소
|
3
|
::selection
|
::selection
|
사용자에 의해 지정된 선택 영역
|
|
:target
|
#news:target
|
현재 선택된 활성화된 #news 요소 (사용자가 앵커가 포함된 URL을 클릭했을 때)[2]
|
3
|
:valid
|
input:valid
|
유효한 값을 가지는 <input> 요소들
|
3
|
:visited
|
a:visited
|
이미 방문한 적이 있는 링크를 가지고 있는 <a> 요소들
|
1
|
