[CSS] 선택자 / 가상요소 종류와 개념 예시 공부하기

1. 계층 선택자

---

종류	예시	이름
하위 선택자 (Descendant Selector)	div p { color:#fff;}	div 태그의 모든 자식 중 p 태그를 모두 선택하여 글씨 색을 하얀색으로 변경합니다.
자식 선택자 (Child Selector)	div > p { color:#fff;}	div 태그의 모든 자식 중 첫번째 자식 p 태그를 선택하여 글씨 색을 하얀색으로 변경합니다.
형제 선택자 (sibling Selector)	div ~ p { color:#fff;}	div 태그의 인접한 형제 p 태그를 모두 선택하여 글씨 색을 하얀색으로 변경합니다.
인접 형제 선택자 (Adjacent Sibling Selector)	div + p { color:#fff;}	div 태그의 인접한 형제 첫번째 p 태그를 선택하여 글씨 색을 하얀색으로 변경합니다.

 

 

2. 가상 요소

---

종류	예시	이름
::first-line	p:first-line {color:#fff;}	문단의 첫 줄에 컬러색을 하얀색으로 변경합니다.
::first-letter	p:first-letter {color:#fff;}	문단의 첫 글자에 컬러색을 하얀색으로 변경합니다.
::before	p:before {content:"시작"}	문단 시작 부분에 '시작'이라는 요소를 추가합니다.
::after	p:after {content:"끝"}	문단 끝 부분에 '끝'이라는 요소를 추가합니다.
::selection	p:selection {color:#fff;}	드래그로 선택하였을 경우 글씨 색을 하얀색으로 변경합니다.

 

 

3.가상 클래스

---

종류	예시	이름
:first-child	li:first-line {color:#fff;}	li 자식 요소 중 첫 번째 자식 요소에게 컬러를 하얀색으로 변경합니다.
:last-child	li:last-line {color:#fff;}	li 자식 요소 중 마지막 번째 자식 요소에게 컬러를 하얀색으로 변경합니다.
:first-of-type	p:first-of-type {color:#fff;}	자식 요소 중 p 태그 첫 번째 자식 요소에게 컬러를 하얀색으로 변경합니다.
:last-of-type	p:last-of-type {color:#fff;}	자식 요소 중 p 태그 마지막 번째 자식 요소에게 컬러를 하얀색으로 변경합니다.
:nth-child()	li:nth-child(2) {color:#fff;}	li 자식 요소 중 2번째 자식 요소에게 컬러를 하얀색으로 변경합니다.
:nth-last-child()	li:nth-last-child(2) {color:#fff;}	li 자식 요소 중 뒤에서 2번째 자식 요소에게 컬러를 하얀색으로 변경합니다.
:nth-of-type()	p:nth-of-type(2) {color:#fff;}	자식 요소 중 p 태그 2번째 자식 요소에게 컬러를 하얀색으로 변경합니다.
:nth-last-of-type()	p:nth-last-of-type(2) {color:#fff;}	자식 요소 중 p 태그 뒤에서 2번째 자식 요소에게 컬러를 하얀색으로 변경합니다.
:only-child	:only-child {color:#fff;}	자식 요소 중 유일한 태그 자식 요소에게 컬러를 하얀색으로 변경합니다.
:only-of-type	p:only-of-type {color:#fff;}	자식 요소 중 유일한 p 태그 자식 요소에게 컬러를 하얀색으로 변경합니다.
:not()	li:not(:nth-child(2)) {color:#fff;}	li 자식 요소 중 2번째 자식 요소를 제외하고 컬러를 하얀색으로 변경합니다.
:root	:root {color:#fff;}	기본 루트 요소의 컬러를 하얀색으로 변경합니다.
:empty	:empty {color:#fff;}	컨텐츠 요소가 없는 요소의 컬러를 하얀색으로 변경합니다.

 

 

4. 속성 선택자

---

종류	예시	이름
[name]	a[href]	a 태그 속성 중에 href가 있으면 선택합니다.
[name="value"]	a[href="#header"]	a 태그 href 속성의 값이 '#header'이면 선택합니다.
[name~="value"]	a[href~="web"]	a 태그 href 속성의 값이 'web'을 포함한 요소를 선택합니다.
[name|="value"]	a[href|="web"]	a 태그 href 속성의 값이 'web'이거나 'web'으로 시작하는 요소를 선택합니다.
[name^="value"]	a[href^="web"]	a 태그 href 속성의 값이 'web'으로 시작하는 태그를 선택합니다.
[name*="value"]	a[href*="web"]	a 태그 href 속성의 값이 'web'이 포함되어 있는 태그를 선택합니다.
[name$="value"]	a[href$="com"]	a 태그 href 속성의 값이 'com'으로 끝나는 태그를 선택합니다.

 

 

5. 폼 관련 선택자

---

종류	예시	이름
:checked	input:checked {color:#fff;}	input 태그가 체크되었을 때 글씨 색을 하얀색으로 변경합니다.
:focus	input:link {color:#fff;}	input 태그에 초점이 맞추어졌을 때 글씨 색을 하얀색으로 변경합니다.
:enabled	input:enabled {color:#fff;}	input 태그가 사용 가능하면 글씨 색을 하얀색으로 변경합니다.
:disabled	input:disabled {color:#fff;}	input 태그가 사용 가능하지 않으면 글씨 색을 하얀색으로 변경합니다.

 

 

 

 

 

 

 

 

[참고 사이트]

https://webzz.tistory.com/357