05. CSS 선택자

1. CSS 선택자

01. 선택자 종류

(1) 선택자 문법

선택자	문법	설명
전체 선택자	*	모든 요소 선택
태그 선택자	태그이름	특정 태그 요소 선택
클래스 선택자	.클래스이름	특정 클래스를 가진 요소 선택
ID 선택자	#아이디이름	특정 ID를 가진 요소 선택
자식 선택자	부모요소 > 자식요소	부모 요소 바로 아래 자식 요소 선택
후손(하위) 선택자	조상요소 자손요소	조상 요소의 하위 자손 요소 선택
인접 형제 선택자	요소1 + 요소2	요소1 바로 뒤에 나오는 요소2 선택
일반 형제 선택자	요소1 ~ 요소2	요소1 다음에 나오는 요소2 선택

 

(2) 선택자 적용

• 전체 선택자 : *
• 태그 선택자 : p 태그
• 클래스 선택자 : .
• ID 선택자 : #
• 자식 선택자 : .parent > .child
• 후손 선택자 : .ancestor .descendant
• 인접 형제 선택자 : h2 + p
• 일반 형제 선택자 : h2 ~ p

---

2. 선택자 우선순위

• CSS의 선택자를 통해 원하는 요소에 CSS를 적용함에 있어 어떤 방법으로 CSS를 적용하는가에 따라 우선순위가 나뉘게 된다.
• 결과적으로 온전히 지금 적용하고자 하는 CSS가 선택자를 통해 적용되게 하기 위해서는 !important를 활용할 수 있다.

#userid {
		color: red;
}

.userid {
		color: blue !important;
}