[CSS] 선택자 종류 및 사용방법 (태그, id, class, 속성, 자식, 하위, 형제, 가상클래스, 연결)

 

CSS - 선택자 종류 및 사용방법

(태그, id, class, 속성, 자식, 하위, 형제, 가상클래스, 연결)

 

 

   목차

1. CSS  선택자 종류
2. 연결선택자
3. 가상클래스 선택자
4. 속성선택자

 

 

1. CSS 선택자 종류

 

html 태그에 css 스타일을 적용하기 위해서는 먼저 적용하고자 하는 태그를 선할 수 있어야 합니다. 이렇게 스타일 속성을 적용하고자 하는 요소를 선택자라고 하며 그 종류에 대해 알아보도록 하겠습니다. 

 

1. 전체선택자 :  * 로 모든 요소를 선택합니다. (문서의 여백이나 글꼴등을 초기화 할 때 사용)
2. 태그 선택자 :  태그이름으로 해당 요소를 선택합니다.
   • [html]   <div>내용</div>
   • [style]   div { color:red; }
3. class 선택자 :  .클래스이름으로 해당 요소를 선택합니다. 
   • [html]   <div class="a">내용</div>
   • [style]   .a { color:red; }
4. id 선택자 :  #아이디이름으로 해당 요소를 선택합니다. 
   • [html]   <div id="a">내용</div>
   • [style]   #a { color:red; }

 

 

 

2. 연결선택자

 

1. 하위선택자 : 요소에 포함되어 있는 모든 하위요소를 선택합니다.
   • [형식]   요소 하위요소 { ... }
   • [예시]   a b { color:red; } 
2. 자식선택자 : 요소에 포함되어 있는 자식요소를 선택합니다.
   • [형식]   요소 > 자식요소 { ... }
   • [예시]   a > b { color:red; }
3. 형제선택자 : 요소 다음에 있는 모든 형제요소를 선택합니다. 
   • [형식]   요소 ~ 형제요소 { ... }
   • [예시]   a ~ b { color:red; }
4. 인접형제선택자 : 요소 바로 다음에 붙어 있는 첫번째 형제요소를 선택합니다. 
   • [형식]   요소 + 형제요소 { ... }
   • [예시]   a + b { color:red; }

 

 

 

3. 가상클래스 선택자

 

1) 요소의 동작이나 상태에 따른 가상클래스 선택자

1. :link 선택자 : 사용자가 아직 방문하지 않은 링크를 선택합니다. ex) a:link { ... }
2. :visited 선택자 : 사용자가 방문한 링크를 선택합니다. ex) a:visited { ... }
3. :hover 선택자 : 해당 요소에 마우스 커서를 올려놓았을 때를 선택합니다. ex) a:hover { ... }
4. :active 선택자 : 해당 요소를 마우스로 클릭하고 있을 때를 선택합니다. ex) a:active { ... }
5. :focus 선택자 : 해당 요소에 초점이 맞추어졌을 때를 선택합니다. ex) input:focus { ... }
6. :enabled 선택자 : 요소가 사용가능한 상태일 때를 선택합니다. ex) button:enabled { ... }
7. :disabled 선택자 : 요소가 사용불가능한 상태일 때를 선택합니다. ex) button:disabled { ... }
8. :checked 선택자 : 해당 요소의 항목이 체크되었을 때를 선택합니다. ex) input:checked { ... }

 

2) 태그 구조에 따른 가상클래스 선택자

1. :nth-child(n) 선택자 : 앞에서부터 n번째 형제 요소를 선택합니다. ex) div:nth-child(3) { ... }
2. :nth-last-child(n) 선택자 : 뒤에서부터 n번째 형제 요소를 선택합니다. ex) div:nth-last-child(2n+1) { ... }
3. :nth-of-type(n) 선택자 : 앞에서부터 같은유형의 n번째 형제 요소를 선택합니다. ex) div:nth-of-type(odd) { ... }
4. :nth-last-of-type(n) 선택자 : 뒤에서부터 같은유형의 n번째 형제 요소를 선택합니다. ex) div:nth-last-of-type(2n) { ... }
5. :first-child : 맨 앞의 형제요소를 선택합니다. ex) div:first-child { ... }
6. :last-child : 맨 마지막 형제요소를 선택합니다. ex) div:last-child { ... }  
7. :first-of-type : 같은 유형의 형제 요소중 첫번째 형제요소를 선택합니다. ex) div:first-of-type { ... }
8. :last-of-type : 같은 유형의 형제 요소중 마지막 형제요소를 선택합니다. ex) div:last-of-type { ... }  
9. :only-child : 자기가 유일한 자식요소인 경우를 선택합니다. ex) div:only-child { ... }
10. :only-of-type : 자기가 해당 유형의 유일한 자식요소인 경우를 선택합니다. ex) div:only-of-type { ... }

 

3) 가상요소 선택자

1. ::before 선택자 : 특정요소의 내용 앞에 지정한 내용을 추가합니다. ex) div::before { content:"내용 : "; color:red; }
2. ::after 선택자 : 특정요소의 내용 뒤에 지정한 내용을 추가합니다. ex) div::after { content:"내용 : "; color:red; }
3. ::selection 선택자 : 드래그로 지정한 영역을 선택합니다. ex) div::selection { background-color:blue; }
4. ::first-letter 선택자 : 특정요소의 첫번째 글자를 선택합니다. ex) div::first-letter { color:blue; }
5. ::first-line 선택자 : 특정요소의 첫번째 줄을 선택합니다. ex) div::first-line { color:blue; }

 

 

 

4. 속성선택자

 

속성선택자는 특정한 속성을 사용한 요소에 스타일을 적용할 때 사용합니다. 

 

1. [속성] 선택자 : 해당 속성을 사용한 요소를 선택합니다. ex) [href] { color:red; }
2. [속성 = 값] 선택자 : 속성과 값이 일치하는 요소를 선택합니다. ex) a[href = "#top"] { color:red; }
3. [속성 ~= 값] 선택자 : 속성과 여러값중 해당 값이 포함된 요소를 선택합니다. ex) a[href ~= "#top"] { color:red; }
4. [속성 |= 값] 선택자 : 속성과 값이 일치하거나 값- 이 포함된 요소를 선택합니다. ex) a[href |= "#top"] { color:red; }
5. [속성 ^= 값] 선택자 : 속성과 값이 지정한 단어로 시작하는 요소를 선택합니다. ex) a[href ^= "#top"] { color:red; }
6. [속성 $= 값] 선택자 : 속성과 값이 지정한 단어로 끝나는 요소를 선택합니다. ex) a[href $= "#top"] { color:red; }
7. [속성 *= 값] 선택자 : 속성과 값이 지정한 단어를 포함하는 요소를 선택합니다. ex) a[href *= "#top"] { color:red; }