※ 선택자는 스타일 입힐 대상 결정하는 거라, CSS에서 가장 중요.
1.
모든 자연어(예: 한글・일본어・영어...)를 사용 가능.
2.
영문대소문자와 숫자 조합 권장. 단, 숫자로 시작 불가.
3.
언더스코어(_)와 하이픈(-) 제외한 특수문자 사용 불가.
<style>
/* 작동 O */
#홈짱 {color:red;}
#ホムチャン {color:blue;}
#homzzang {color:green;}
#homzzang-com {color:magenta;}
#homzzang_com {color:pink;}
#homzzang_2012 {color:tomato;}
/* 작동 X */
#homzzang.com {color:tomato;}
#2012_homzzang {color:tomato;}
</style>
※ 작동 O
<p id="홈짱">#홈짱 : 홈짱닷컴 Homzzang.com</p>
<p id="ホムチャン">#ホムチャン : 홈짱닷컴 Homzzang.com</p>
<p id="homzzang">#homzzang : 홈짱닷컴 Homzzang.com</p>
<p id="homzzang-com">#homzzang-com : 홈짱닷컴 Homzzang.com</p>
<p id="homzzang_com">#homzzang_com : 홈짱닷컴 Homzzang.com</p>
<p id="homzzang_2012">#homzzang2012 : 홈짱닷컴 Homzzang.com</p>
<hr>
※ 작동 X
<p id="homzzang.com">#homzzang.com : 홈짱닷컴 Homzzang.com</p>
<p id="2012homzzang">#2012homzzang.com : 홈짱닷컴 Homzzang.com</p>
결과보기
.class
(예) .hz 경우, class = "hz" 속성 갖는 모든 요소 선택.
.class1.class2
(예) .hz1.hz2 경우, hz1 hz2 두 클래스를 모두 갖는 요소 선택.
.class1 .class2
(예) .hz1 .hz2 경우, hz1 가진 요소의 자손 중 hz2 갖는 모든 요소 선택.
#id
(예) #hz 경우, id = "hz"인 요소 선택. ※ 유일해야 함.
*
(예) * 경우, 모든 요소 선택.
element
(예) p 경우, 모든 <p> 요소 선택.
element.class
(예) p.hz 경우, class = "hz" 가진 모든 <p> 요소 선택.
element, element
(예) div, p 경우, 모든 <div> 요소와 모든 <p> 요소 선택.
element element
(예) div p 경우, <div> 요소 내의 모든 <p> 요소 선택.
element > element
(예) div > p 경우, 부모가 <div> 요소인 모든 <p> 요소 선택.
element + element
(예) div + p 경우, <div> 요소 바로 뒤에 배치된 모든 <p> 요소 선택.
element1 ~ element2
(예) p ~ ul 경우, <p> 요소 뒤에 배치된 모든 형제 <ul> 요소 선택.
[attribute]
(예) [target] 경우, target 속성이 있는 모든 요소 선택.
[attribute=value]
(예) [target = _blank] : target = "_ blank"인 모든 요소 선택.
[attribute~=value]
(예) [title~=hz] 경우, title 속성의 속성값에 "hz" 포함된 모든 요소 선택.
단, hz 단독이거나 앞뒤로 공백이여야 함.
[attribute|=value]
(예) [title|=hz] : title 속성의 속성값이 해당 문자인 "hz" 또는 바로 뒤 언더바(_)가 오는 "hz-"로 시작하는 모든 요소 선택.
단, 단어 중 일부이거나 뒤에 공백이나 언더바(_) 포함된 경우엔 해당 X.
[attribute^=value]
(예) a [href^="https"] 경우, href 속성값이 "https"로 시작하는 모든 <a> 요소를 선택.
[attribute$=value]
(예) a [href $= ". pdf"] 경우, href 속성값이 ".pdf"로 끝나는 모든 <a> 요소 선택.
[attribute*=value]
(예) a [href * = "homzzang"] 경우, href 속성값에 "homzzang" 하위 문자열이 포함된 모든 <a> 요소 선택.
:active
(예) a:active 경우, <a> 요소 클릭하는 순간 선택.
::after
(예) p::after 경우, 모든 <p> 요소의 뒤 부분 선택.
::before
(예) p::before 경우, 모든 <p> 요소의 앞 부분 선택.
:checked
(예) input:checked 경우, checked 속성 갖는 <input> 요소 선택.
※ type 속성이 checkbox , radio인 <input> 요소만 checked 속성 가능.
:default
(예) input:default 경우, 처음부터 기본 checked 된 <input> 요소 선택.
:disabled
(예) input:disabled 경우, disabled (비활성화)된 모든 <input> 요소 선택.
:empty
(예) p:empty 경우, 자식 없는 모든 <p> 요소 선택. (텍스트 노드 포함).
:enabled
(예) input:enabled 경우, 모든 활성화 된 <input> 요소 선택.
:first-child
(예) p:first-child 경우, 부모의 첫 번째 자식인 모든 <p> 요소 선택.
::first-letter
(예) p::first-letter 경우, 모든 <p> 요소의 첫 글자 선택.
::first-line
(예) p::first-line : 모든 <p> 요소의 첫 라인 선택.
:first-of-type
(예) p:first-of-type : 부모의 첫 번째 p 타입 요소인 모든 <p> 요소 선택.
:focus
(예) input:focus 경우, input 요소에 포커스 된 경우 선택.
※ 포커스 : 해당 요소 선택해 해당 요소 위에서 커서가 깜빡감빡 중인 상태.
:hover
(예) a:hover 경우, a 요소 위에 허버 된 경우 선택.
※ 허버 : 해당 요소 위에서 마우스커서가 머무는 상태.
:in-range
(예) input:in-range : 지정 범위 내의 값 갖는 input 요소 선택.
즉, type="number" 설정된 input 요소의 value 값이 (min ≤ value ≤ max)인 요소 선택.
:indeterminate
(예) input:indeterminate 경우, 불확정 상태에 있는 input 요소 선택.
:invalid
(예) input: invalid : type 속성의 속성값과 부합 않는 값 갖는 요소 선택.
:lang (language)
(예) p:lang(ko) : lang (언어)속성이 "ko"(한국어)인 모든 <p> 요소 선택.
:last-child
(예) p: last-child 경우, 부모의 마지막 자식인 모든 <p> 요소 선택.
:last-of-type
(예) p:last-of-type 경우, 부모의 마지막 p 타입 요소인 모든 <p> 요소 선택.
:link
(예) a:link 경우, 방문하지 않은 모든 <a> 요소 선택.
:not(selector)
(예) :not(p) 경우, <p> 요소가 아닌 모든 요소 선택.
:nth-child(n)
(예) p:nth-child(2) 경우, 부모의 두 번째 자식인 모든 <p> 요소 선택.
:nth-last-child(n)
(예) p:nth-last-child(2) 경우, 마지막 자식부터 계산하여 부모의 두 번째 자식인 모든 <p> 요소 선택.
:nth-last-of-type(n)
(예) p:nth-last-of-type(2) 경우, 마지막 자식부터 세어 부모의 두 번째 p타입의 모든 <p> 요소 선택.
:nth-of-type(n)
(예) p:nth-of-type(2) 경우, 부모의 두 번째 p타입의 모든 <p> 요소 선택.
:only-of-type
(예) p:only-of-type : 부모의 유일한 p타입의 모든 <p> 요소 선택.
:only-child
(예) p:only-child 경우, 부모의 유일한 자식인 모든 <p> 요소 선택.
:optional
(예) input:optional 경우, required 속성 없는 모든 input 요소 선택.
:out-of-range
(예) input:out-of-range 경우, 지정 범위 밖의 값 갖는 input 요소 선택.
즉, type="number" 설정된 input 요소의 value 값이 (min ≤ value ≤ max) 아닌 요소 선택.
::placeholder
(예) input::placeholder 경우, placeholder 속성에 텍스트 있는 input 요소 선택.
:read-only
(예) input:read-only 경우, readonly (읽기전용) 속성 갖는 input 요소 선택.
:read-write
(예) input:read-write 경우, readonly (읽기전용) 속성 안 갖는 input 요소 선택.
:required
(예) input:required 경우, requied (필수입력) 속성 갖는 input 요소 선택.
:root
(예) :root 경우, 웹문서의 최상위 요소 선택.
::selection
(예) :: selection 경우, 사용자가 요소 안에서 더블클릭이나 드래그로 선택한 부분을 선택.
:target
(예) #hz:target 경우, <a href="#hz"..> 클릭 시, 목적지 #hz 요소 선택.
:valid
(예) input:valid 경우, 지정 type에 부합하는 값 갖는 모든 input 요소 선택.
:visited
(예) a:visited 경우, 이미 클릭해서 방문한 모든 링크 선택.
PS.