[CSS] 선택자 정리

선택자는 크게 기본 선택자, 복합 선택자, 가상 클래스 선택자, 가상 요소 선택자, 속성 선택자로 나누어진다.

여기서 헷갈리는 부분만 정리하겠다.

 

2. 복합 선택자

1) 일치 선택자

span.orange{
	color: red;
}

 

2) 자식 선택자

ul > .orange{
	color: red;
}

 

3) 하위 선택자

div .oragne{
	color: red;
}

 

4) 인접 형제 선택자

.orange + li{
	color: red;
}

 

5) 일반 형제 선택자

.orange ~ li{
	color: red;
}

 

3. 가상 클래스 선택자

5) :nth-child(n)

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

 

6) :not(s)

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

 

4. 가상 요소 선택자

가상 요소 선택자는 :: 기호로 시작한다.

1) ::before

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

 

2) ::after

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

 

 

---

개인 학습 기록용이기 때문에 오류가 있을 수 있습니다.

양해 부탁드립니다🙂

 

📚 출처

책 <프론트엔드 개발을 시작하려고 해> 입문편