CSS 선택자

기본 선택자

* (전체 선택자)

모든 요소를 선택

* {
	color: red;
}

ABC (태그 선택자)

태그 이름이 ABC인 요소 선택

li {
	color: red;
}

.ABC (클래스 선택자)

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

.orange {
	color: red;
}

#ABC (아이디 선택자)

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

#orange {
	color: red;
}

 

복합 선택자

ABCXYZ (일치 선택자)

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

• 태그 선택자를 먼저 적는 것이 좋음

span.orange {
	color: red;
}

ABC > XYZ (자식 선택자)

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

ul > .oragne {
	color: red;
}

ABC XYZ (하위 선택자)

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

• 띄어쓰기가 선택자의 기호
• 자식 선택자보다 더 넓은 범위(후손 요소 포함)

div .orange {
	color: red;
}

ABC + XYZ (인접 형제 선택자)

선택자 ABC의 다음 형제 요소 XYZ 하나를 선택

.orange + li {
	color: red;
}

ABC ~ XYZ (일반 형제 선택자)

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

.orange ~ li {
	color: red;
}

 

가상 클래스 선택자

1. 동작을 나타내는 가상 클래스 선택자

ABC:hover

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

a:hover {
	color: red;
}

ABC:active

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

a:active {
	color: red;
}

ABC:focus

선택자 ABC 요소가 포커스 되면 선택

• focus가 될 수 있는 요소는 HTML 대화형 콘텐츠 해당
  • input, button, label, select 등의 요소

input:focus {
	background-color: orange;
}

• tabindex 속성을 사용한 요소도 focus 가능

<div class="box" **tabindex="-1"**></div>

.box:focus {
	background-color: blue;
}

2. 특정한 요소를 선택하는 가상 클래스 선택자

ABC:first-child

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

• class가 fruits인 하위 span 선택자 중 첫 번째 태그

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

ABC:last-child

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

• class가 fruits인 하위 h3 선택자 중 마지막 번째 태그

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

ABC:nth-childe(n)

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

• class가 fruits인 모든 하위 선택자 중 2번째 태그

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

• class가 fruits인 모든 하위 선택자 중 2의 배수(짝수) 번째 태그
  • n은 0부터 시작(Zero-Based Numbering)
  • 단 0번째 태그는 없음

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

• class가 fruits인 모든 하위 선택자 중 홀수 번째 태그

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

ABC:not(XYZ)

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

• class가 fruits인 모든 하위 선택자 중 span 태그가 아닌 요소들 선택

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

 

가상 요소 선택자

• 인라인 요소
• content 속성과 세트

ABC::before

선택자 ABC 요소의 내부 앞에 내용을 삽입

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

<div class="box">
	Content!
</div>

➡️ 출력: 앞! Content!

ABC::after

선택자 ABC 요소의 내부 뒤에 내용을 삽입

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

<div class="box">
	Content!
</div>

➡️ 출력: Content! 뒤!

 

속성 선택자

• 특수 기호 대괄호 [ ] 사용
• 유니크한 속성에 대해서 찾기 유용

[ABC]

속성 ABC을 포함한 요소 선택

[disabled] {
	color: red;
}

[ABC=”XYZ”]

속성 ABC을 포함하고 값이 XYZ인 요소 선택

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

 

선택자 우선순위

1. 점수가 높은 선언이 우선

1. !importnat - 999999999점
2. 인라인 선언 - 1000점
3. id 선택자 - 100점
4. class 선택자 - 10점
5. 태그 선택자 - 1점
6. 전체 선택자 - 0점
7. 상속 - 점수 X

2. 점수가 같으면, 가장 마지막에 해석된 선언이 우선

ex) 

<div 
	id="color_yellow"
	class="color_green"
	style="color: orange;"> - 1000점
	Hello word!
</div>

div { color: red !important;} - 999999999점
#color_yellow { color: yellow; } - 100점
.color_green { color: green; } - 10점
div { color: blue; } - 1점
* { color: darkblue; } - 0점
body { color: violet; } - X

 

 

---

※ 패스트캠퍼스 FE 프로젝트십 과정 중 강의를 듣고 정리한 내용입니다.