• Q&A
  • 수강신청
  • 회원가입
  • 로그인

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

Selector 종류 


1. id 선택자 ★  : CSS1 
2. class 선택자 ★  : CSS1
3. 전체선택자 (=공통선택자) : CSS2
4. 요소선택자 (=태그선택자)  : CSS1
5. 자손선택자 (=후손선택자)  : CSS1
6. 자식선택자 : CSS2
7. 인접선택자 : CSS2
8. 속성선택자 : CSS2
9. 링크선택자 (=반응선택자)  : CSS1,  CSS2 혼합
10 가상선택자 (=일반구조선택자)   : CSS1,  CSS2 혼합

CSS를 한국어로 번역하면서, 번역자마다 용어 상 혼선 존재. ㅡㅡ;
따라서, 각각의 선택자 강의를 통해 정확한 사용법 익히기 바람.
추천 : http://www.nextree.co.kr/p8468/
 
 

선택자에 사용가능한 문자 (= 선택자 이름짓기 주의사항)

 

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

.intro  :  class = "intro"를 가진 모든 요소를 선택.

 

.class1.class2

.name1.name2  :  class 속성 내에 name1과 name2가 모두 설정된 모든 요소를 선택.

 

.class1 .class2

.name1 .name2  :  name1을 가진 요소의 자손인 name2를 가진 모든 요소를 선택.

 

 

#id

#hz  :  id = "hz"인 요소 선택.

 


 

*

*  :  모든 요소 선택.

 

 

element

p  :  모든 <p> 요소 선택.

 

element.class

p.intro  :  class = "intro" 가진 모든 <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~=flower]  :  단어 "flower"를 포함하는 title 속성을 가진 모든 요소를 선택.

 

[attribute|=value]

[lang|=ko]  :  "ko"로 시작하는 lang 속성값 가진 모든 요소를 선택.

 

[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 활성 링크를 선택.

 

::after

p::after  :  각 <p> 요소의 내용 뒤에 무언가 삽입.

 

::before

p::before  :  각 <p> 요소의 내용 앞에 무언가 삽입

 

:checked

input:checked  :  체크(checked)된 모든 <input> 요소를 선택.

 

: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  :  foucs 갖는 input 요소 선택.

 

:hover

a:hover  :  마우스 오버 링크를 선택.

 

:in-range

input:in-range  :  지정 범위 내의 값을 가진 input 요소를 선택.

 

:undeterminate

input:indeterminate  :  불확정 상태에 있는 input 요소를 선택.

 

:invalid

input: invalid  :  유효하지 않는 값을 갖는 모든 input 요소 선택.

 

:lang (language)

p:lang(it)  :  lang 속성이 "it"(이탈리아어) 인 모든 <p> 요소 선택.

 

:last-child

p: last-child  :  부모의 마지막 자식인 모든 <p> 요소 선택.

 

:last-of-type

p:last-of-type  :  부모의 마지막 <p> 요소인 모든 <p> 요소를 선택.

 

:link

a:link  :  방문하지 않은 모든 링크를 선택.

 

: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 요소를 선택.

 

::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  :  웹문서의 root 요소를 선택.

 

::selection

:: selection  :  사용자가 선택한 요소 부분을 선택.

 

:target

#news:target  :  news 이름이 포함된 URL 클릭해서 현재 활성화 된 #news 요소를 선택.

 

:valid

input:valid  :  유효한 값을 가진 모든 입력 요소를 선택.

 

:visited

a:visited  :  이미 클릭해서 방문한 모든 링크를 선택.

 



자동로그인
Since 2012