Class 선택자 | .클래스명 | .gnb { ...... |
태그 선택자 | 태그명 | body { ..... |
ID 선택자 | #ID명 | #gnb { ..... |
전체 선택자 | * | * { ..... |
속성 선택자 | [ ] | a[title = "daum"] a태그에 title이 daum인 것 |
부모 자손 선택자 | 선택자1 선택자2 | a .daum {.... 선택자 사이에 공백 넣기 |
자식 선택자 | 선택자 > 선택자 | body > .gnb { .... 공백과 다른 점은 직계 자손만 선택 가능 |
인접 형제 선택자 | 선택자 + 선택자 | a + ul { .... 선택자 바로 뒤에있는 태그가 선택됨 |
일반 형제 선택자 | 선택자 ~ 선택자 | ul ~ span { .... ul 아래 있는 모든 sapn 태그 요소 선택됨 |
가상선택자 | : | a:hover 등 태그: nth-child(n) n번째 선택 .class:nth-of-type(n) n번째 선택 |
가상요소 | :: | .class::first-line 첫번째 줄 .class::first-letter 첫번째 글자 .class::after 요소 뒤에 .class::before 요소 앞에 |
참고
https://developer.mozilla.org/ko/docs/Web/CSS/CSS_Selectors
CSS 선택자 - CSS: Cascading Style Sheets | MDN
CSS 선택자는 CSS 규칙을 적용할 요소를 정의합니다.
developer.mozilla.org
728x90