목차
Selector 유형 (= 선택자 분류) Selector에 사용 가능한 문자. (= 선택자 이름 짓기) Selector 종류 Selector 관련 주소
※ 선택자는 스타일 입힐 대상 결정하는 거라, CSS에서 가장 중요.
※ JS, JQUERY 언어에서도 사용하므로, 자세히 공부하시기 바람.
※ 선택자는 단독 또는 다른 선택자와 결합해서 사용 가능함.
Selector 유형 (= 선택자 분류)
id 선택자 ★ : (예) #hz {color:red;}class 선택자 ★ : (예) .hz {color:red;}전체 선택자 (=공통선택자) : (예) * {color:red;}요소 선택자 (=태그선택자) : (예) p {color:red;}자손 선택자 (=후손선택자) : (예) p span {color:red;}자식 선택자 : (예) p>span {color:red;}인접 선택자 : (예) h1 + p {color: red;}속성 선택자 : (예) a[href] {color:red;} 그외 다양.링크 선택자 : (예) a:hover {color:red;}가상 선택자 : (예) a::before {color:red;} 그외 다양.
PS. 더 간략히 분류하면,
전체 - *
아이디 - #id
클래스 - .class
타입 - 요소선택자 , 자손선택자, 자식선택자, 인접선택자
상태 - 링크선택자 (: 기호 사용) 또는 가상선택자 (:: 기호 사용)
속성 - 속성선택자 ([] 기호 사용)
PS1. 번역자마다 용어가 다르니, 각 예제 통해서 정확한 쓰임새 이해 권장.
PS2, , (쉼표) 기호로 위 선택자를 한번에 열거 가능. a, div, #hz {color:red;}
Selector에 사용 가능한 문자. (= 선택자 이름 짓기)
모든 자연어 (예: 한글・일본어・영어...)를 사용 가능.영문대소문자 와 숫자 조합 권장. 단, 숫자로 시작 불가. 언더스코어(_)와 하이픈(-) 제외한 특수문자 사용 불가.
<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>
결과보기
Selector 종류
.class .class1.class2 - (예) .hz1.hz2 경우, hz1 hz2 두 클래스를 모두 갖는 요소 선택..class1 .class2 - (예) .hz1 .hz2 경우, hz1 가진 요소의 자손 중 hz2 갖는 모든 요소 선택. #id -
* element element . class - (예) p.hz 경우, class = "hz" 가진 모든 <p> 요소 선택.element, element element element element > element - element + element - element1 ~ element2 -
[attribute ] - [attribute= value ] - (예) [target = _blank] : target = "_ blank"인 모든 요소 선택. [attribute~= value ] - 포함 된 모든 요소 선택. 단, 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 ] -
:active - 클릭 하는 순간 선택.::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> 요소 선택. :empty - 자식 없는 모든 <p> 요소 선택. (텍스트 노드 포함). - :enabled - (예) input:enabled 경우, 모든 활성화 된 <input> 요소 선택.
:first-child - 첫 번째 자식 인 모든 <p> 요소 선택. ::first-letter - 첫 글자 선택. ::first-line - 첫 라인 선택.:first-of-type - (예) p:first-of-type : 부모의 첫 번째 p 타입 요소 인 모든 <p> 요소 선택. :focus - 포커스 된 경우 선택.※ 포커스 : 해당 요소 선택해 해당 요소 위에서 커서가 깜빡감빡 중인 상태.
:hover - 허버 된 경우 선택. (※ 허버 : 해당 요소 위에서 마우스커서가 머무는 상태.):in-range - (예) input:in-range : 지정 범위 내의 값 갖는 input 요소 선택. 즉, type="number" 설정된 input 요소의 value 값이 (min ≤ value ≤ max)인 요소 선택. :indeterminate - 불확정 상태 에 있는 input 요소 선택. :invalid - 부합 않는 값 갖는 요소 선택. :lang (language ) - 언어 )속성이 "ko"(한국어)인 모든 <p> 요소 선택. :last-child - 마지막 자식 인 모든 <p> 요소 선택. :last-of-type - 마지막 p 타입 요소인 모든 <p> 요소 선택. :link - 방문하지 않은 모든 <a> 요소 선택. :not(selector ) - (예) :not(p) 경우, <p> 요소가 아닌 모든 요소 선택.
:nth-child(n ) - (예) p:nth-child(2) 경우, 부모의 두 번째 자식 인 모든 <p> 요소 선택. :nth-last-child(n ) - 마지막 자식부터 계산하여 부모의 두 번째 자식인 모든 <p> 요소 선택. :nth-last-of-type(n ) - (예) p:nth-last-of-type(2) 경우, 마지막 자식부터 세어 부모의 두 번째 p타입 의 모든 <p> 요소 선택.
:nth-of-type(n ) - 부모의 두 번째 p타입 의 모든 <p> 요소 선택. :only-of-type - 부모의 유일 한 p타입 의 모든 <p> 요소 선택. :only-child - 부모의 유일한 자식 인 모든 <p> 요소 선택.:optional - required 속성 없는 모든 input 요소 선택. :out-of-range - 지정 범위 밖의 값 갖는 input 요소 선택. 즉, type="number" 설정된 input 요소의 value 값이 (min ≤ value ≤ max) 아닌 요소 선택. ::placeholder - :read-only - 읽기전용 ) 속성 갖는 input 요소 선택. :read-write - (읽기전용) 속성 안 갖는 input 요소 선택. :required - 필수입력 ) 속성 갖는 input 요소 선택. :root - 웹문서의 최상위 요소 선택. ::selection - 사용자가 요소 안에서 더블클릭이나 드래그로 선택 한 부분을 선택. :target - 목적지 #hz 요소 선택. :valid - 부합하는 값 갖는 모든 input 요소 선택. :visited -
PS.
Selector 관련 주소
