Selectors (선택자) 타입

 

🟢 Selectors (선택자)

  

◼️   Universal Selector (전체 선택자)

모든 HTML 요소를 선택하는 선택자.

* {
  margin: 0;
  padding: 0;
}

• * (별표)
  • 페이지 전체에 공통 스타일을 적용할 때 사용하거나, CSS 초기화(reset)에서 많이 사용한다.

 

◼️ Type Selector (타입 선택자 / 요소 선택자)

특정 HTML 태그를 선택하는 선택자.

p {
  color: blue;
}

• 특정 태그 (p)
  • 동일한 태그에 같은 스타일이 적용된다. (가장 기본적인 선택자)

 

◼️    Class Selector (클래스 선택자)

특정 class 속성을 가진 요소를 선택하는 선택자.

.highlight {
  color: red;
}

<p class="highlight">중요한 문장</p>
<div class="highlight">강조 내용</div>

• . (점): 뒤에 클래스 이름을 붙인다.
  • 여러 요소에 재사용 가능하여, 비슷한 스타일을 공통적으로 적용할때 사용한다. (가장 많이 사용하는 선택자)

 

◼️    ID Selector (아이디 선택자)

특정 id 속성을 가진 요소를 선택하는 선택자.

#header {
  background-color: gray;
}

<div id="header">사이트 상단</div>

• # (샵): 뒤에 아이디 이름을 붙인다.
  • 한 페이지에서 하나만 사용 가능하며, 클래스보다 우선순위가 높다.

 

◼️    Group Selector (그룹 선택자)

여러 선택자를 동시에 선택하는 선택자.

h1, h2, h3 {
  color: green;
}

<h1>제목1</h1>
<h2>제목2</h2>
<h3>제목3</h3>

• , (쉼표): 를 사용하여 선택자들을 나열한다.
  • 여러 요소에 같은 스타일 적용이 가능해 코드 중복 줄이기에 좋고, 파일 용량이 줄어든다.

 

 

📋 선택자 종류 요약표 📋

선택자 종류	기호	예시	설명
Universal	*	* { ... }	모든 요소
Type	태그명	div { ... }	특정 태그
Class	.	.container { ... }	클래스 선택
Id	#	#header { ... }	특정 요소 하나
Group	,	h1, h2 { ... }	여러 선택자

 

---

 

🛎️   Selectors 우선 순위 요약 🛎️ 

①  ID

② Class

③  Type

④ Universal

 

---

 

🔗  New selectors 🔗 

모던 웹에서의 selectors 최신 기술&트렌드 공식 문서 사이트

https://drafts.csswg.org/selectors/

Selectors Level 4