• Q&A
  • 회원가입
  • 로그인

[selector] CSS - 선택자 (Selector) 종류 + 선택자에 사용가능한 문자 (= 선택자 이름짓기 주의사항)

목차

  1. Selector 유형 (= 선택자 분류)
  2. Selector에 사용 가능한 문자. (= 선택자 이름 짓기)
  3. Selector 종류
  4. Selector 관련 주소

 

※ 선택자는 스타일 입힐 대상 결정하는 거라, CSS에서 가장 중요.

※ JS, JQUERY 언어에서도 사용하므로, 자세히 공부하시기 바람.

※ 선택자는 단독 또는 다른 선택자와 결합해서 사용 가능함.

 

Selector 유형 (= 선택자 분류)


01. id 선택자 ★  : (예) #hz {color:red;}
02. class 선택자 ★  : (예) .hz {color:red;}
03. 전체선택자 (=공통선택자) : (예) * {color:red;}
04. 요소선택자 (=태그선택자)  : (예) p {color:red;}
05. 자손선택자 (=후손선택자)  : (예) p span {color:red;}
06. 자식선택자 : (예) p>span {color:red;}
07. 인접선택자 : (예) h1 + p {color: red;}
08. 속성선택자 : (예) a[href] {color:red;} 그외 다양.
09. 링크선택자 : (예) a:hover {color:red;}
10. 가상선택자 : (예) a::before {color:red;} 그외 다양.

 


PS. 더 간략히 분류하면,
 
전체 - *
아이디 - #id
클래스 - .class
타입 - 요소선택자 , 자손선택자, 자식선택자, 인접선택자

상태 - 링크선택자 (: 기호 사용) 또는 가상선택자 (:: 기호 사용)

속성 - 속성선택자 ([] 기호 사용)
 
PS1. 번역자마다 용어가 다르니, 각 예제 통해서 정확한 쓰임새 이해 권장.
PS2, , (쉼표) 기호로 위 선택자를 한번에 열거 가능. a, div, #hz {color:red;}
 

Selector에 사용 가능한 문자. (= 선택자 이름 짓기)

 

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>


결과보기

 

Selector 종류

 

.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.

Selector 관련 주소

 

엘리 님 (CSS 선택자) 강의

https://youtu.be/gGebK7lWnCk

 

mdn selector 강의 

https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Selectors

 

선택자 익히기 게임

https://flukeout.github.io/

 


방문 감사합니다. (즐겨찾기 등록: Ctrl + D)

찾아주셔서 감사합니다. Since 2012