Summary

• 기본 선택자
• 복합 선택자
• 가상 클래스 선택자
• 가상 요소 선택자
• 속성 선택자

Notes

1. 기본 선택자

1-1. 전체 선택자

* {color: red;}

1-2. 태그 선택자

ABC

• 태그 이름이 ABC인 선택자

li {color: red;}

1-3. 클래스 선택자

.ABC

• HTML class 속성의 값이 ABC인 요소 선택

.apple {color: red;}

1-4. 아이디 선택자

#ABC

• HTML id 속성의 값이 ABC인 요소 선택

#apple {color: red;}

2. 복합 선택자

2-1. 일치 선택자

ABCXYZ

• 선택자 ABC와 XYZ를 동시에 만족하는 요소 선택

span.apple {color: red;}

2-2. 자식 선택자

ABC > XYZ

• 선택자 ABC의 자식 요소 XYZ 선택

ul > .apple {color: red;}

2-3. 하위(후손) 선택자

ABC XYZ

• 선택자 ABC의 하위 요소 XYZ 선택

div .apple {color: red;}

2-4. 인접 형제 선택자

ABC + XYZ

• 선택자 ABC의 다음 형제 요소 XYZ 1개를 선택

.apple + li {color: red;}

2-5. 일반 형제 선택자

ABC ~ XYZ

• 선택자 ABC의 다음 형제 요소 XYZ 모두를 선택

.apple ~ li {color: red;}

3. 가상 클래스 선택자

3-1. hover

ABC:hover

• 선택자 ABC 요소에 마우스 커서가 올라가 있는 동안 선택

a:hover {color: red;}

3-2. active

ABC:active

• 선택자 ABC 요소에 마우스를 클릭하고 있는 동안 선택

a:active {color: red;}

3-3. focus

ABC:focus

• 선택자 ABC 요소가 포커스 되면 선택
• 기본적으로 포커스가 가능한 요소에 사용 (ex. input)
• 그렇지 않은 요소에는 포커스가 가능하도록 tabindex 속성을 줄 수 있다

input:focus {background-color: red;}

//포커스 가능, 값은 -1을 권장
<div class="box" tabindex="-1"></div>

3-4. first-child

ABC:first-child

• 선택자 ABC가 형제 요소 중 첫째라면 선택

.fruits span:first-child {color: red;}

3-5. last-child

ABC:last-child

• 선택자 ABC가 형제 요소 중 막내라면 선택

.fruits h3:last-child {color: red;}

3-6. nth-child(n)

ABC:nth-child(n)

• 선택자 ABC가 형제 요소 중 n째라면 선택

.fruits *:nth-child(2) {color: red;}

3-7. 부정 선택자

ABC:not(XYZ)

• 선택자 XYZ가 아닌 ABC 요소 선택

.fruits *:not(span) {color: red;}

4. 가상 요소 선택자

4-1. before

ABC::before

• 선택자 ABC 요소의 내부 앞에 인라인 컨텐츠 삽입
• 반드시 삽입될 컨텐츠와 함께 사용한다
• content 항목을 비워두더라도 사용할 것

.box::before {content: "앞";}

4-2. after

ABC::after

• 선택자 ABC 요소의 내부 뒤에 인라인 컨텐츠 삽입
• 반드시 삽입될 컨텐츠와 함께 사용한다
• content 항목을 비워두더라도 사용할 것

.box::after {content: "뒤";}

5. 속성 선택자

5-1. attribute

[ABC]

• 속성 ABC를 포함한 요소 선택

[disabled] {color: red;}
[type="password"] {color: red;}

Selectors

//기본
* {color: red;}			//전체
li {color: red;}		//태그
.apple {color: red;}	//클래스
#apple {color: red;}	//아이디

//복합
span.apple {color: red;}	//일치
ul > .apple {color: red;}	//자식
div .apple {color: red;}	//하위
.apple + li {color: red;}	//인접형제
.apple ~ li {color: red;}	//일반형제

//가상클래스
a:hover {color: red;}					//hover
a:active {color: red;}					//active
input:focus {background-color: red;}	//focus
.fruits span:first-child {color: red;}	//first-child
.fruits h3:last-child {color: red;}		//last-child
.fruits *:nth-child(2) {color: red;}	//nth-child
.fruits *:not(span) {color: red;}		//부정

//가상요소
.box::before {content: "앞";}	//before
.box::after {content: "뒤";}	//after

//속성
[disabled] {color: red;}
[type="password"] {color: red;}