[CSS] HTML 셀렉터의 종류

1. 셀렉터

h1 {}
div {}

• 모든 h1을 선택
• 모든 div를 선택

 

 

2. 전체 셀렉터

* {}

• 모든 엘리먼트를 선택

 

 

3. Tag 셀렉터

section, h1 {}

• 쉼표(,)는 section과 h1를 다중으로 선택

 

 

4. id 셀렉터

#only {}
#label.center {}

• id가 only인 엘리먼트를 선택
• id가 label이면서 동시에 class가 center인 엘리먼트를 선택

 

 

5. class 셀렉터

.center {}
.show#only {}

• class가 center인 엘리먼트를 선택
• class가 show이면서 동시에 id가 only인 엘리먼트를 선택

 

 

6. attribute 셀렉터

a[href] {}
p[id="only"] {}

• a 엘리먼트 중에서, href 속성을 갖는 모든 엘리먼트를 선택
• p 엘리먼트 중에서, id가 only인 속성을 갖는 모든 엘리먼트를 선택

 

 

7. 후손 셀렉터

header h1 {}
article .item {}
#container .mx-auto {}

• header의 후손 엘리먼트 중 h1 엘리먼트를 선택
• article의 후손 엘리먼트 중 class가 item인 엘리먼트를 선택
• id가 container인 엘리먼트의 후손 엘리먼트 중 class가 mx-auto인 엘리먼트를 선택

 

 

8. 자식 셀렉터

header > p {}
#container > .mx-auto {}

• '>'는 header의 자식 엘리먼트 p를 선택
• id가 container인 엘리먼트의 자식 엘리먼트 중 class가 mx-auto인 엘리먼트를 선택

 

 

9. 인접 형제 셀렉터

section + p {}

• '+'는 article과 인접한 형제 엘리먼트 p를 선택

 

 

10. 형제 셀렉터

section ~ p {}

• '~'은 section과 인접한 형제 엘리먼트 p를 모두 선택

 

 

11. 가상 클래스

a:link {}
a:visited {}
a:hover {}
a:active {}
a:focus {}

 

 

12. 요소 상태 셀렉터

input:checked + span {}
input:enabled + span {}
input:disabled + span {}

 

 

13. 구조 가상 클래스 셀렉터

p:first-child {}
ul > li:last-child {}
ul > li:nth-child(3) {}
section > p:nth-child(2n+1) {}
div > div:nth-child(4) {}
div:nth-last-child(2) {}
section > p:nth-last-child(2n + 1) {}
p:first-of-type {}
div:last-of-type {}
ul:nth-of-type(2) {}
p:nth-last-of-type(2) {}

• first-child는 p 엘리먼트 중에서, 첫 번째 자식 엘리먼트를 선택
• ul의 자식 엘리먼트 중에서, 마지막 자식 엘리먼트가 li인 것을 선택
• ul의 자식 엘리먼트 중에서, 세 번째 자식 엘리먼트가 li인 것을 선택
• section의 자식 엘리먼트 중에서, 홀수 번째 자식 엘리먼트가 p인 것을 선택
• div의 자식 엘리먼트 중에서, 네 번째 자식 엘리먼트가 div인 것을 선택
• div의 자식 엘리먼트 중에서, 마지막에서 두 번째 엘리먼트가 div인 것을 선택
• section의 자식 엘리먼트 중에서, 마지막에서 홀수 번째 자식 엘리먼트가 p인 것을 선택
• p 엘리먼트의 형제 엘리먼트 중 첫 번째 p 엘리먼트를 선택
  *first-child와는 다르게 첫 번째 자식 엘리먼트가 아닌, 처음 등장하는 p를 선택
• div 엘리먼트의 형제 엘리먼트 중 마지막 div 엘리먼트를 선택
• p 엘리먼트의 형제 엘리먼트 중 두 번째 p 엘리먼트를 선택
• p 엘리먼트의 형제 엘리먼트 중 마지막에서 두 번째 p 엘리먼트를 선택

 

 

14. 부정 셀렉터

p:not(#only) {}
div:not(:nth-of-type(2)) {}

input:not([type="password"]) {}

• p 엘리먼트 중에서, id가 only인 엘리먼트를 제외하고 모두 선택
• div 엘리먼트의 형제 엘리먼트 중 두 번째 div 엘리먼트를 제외한 모든 div 엘리먼트를 선택

 

 

15. 정합성 확인 셀렉터

input[type="text"]:valid {}
input[type="text"]:invalid {}

 

 

reference

한 눈에 보는 HTML & CSS