[CSS] 선택자의 종류, 전체/타입/속성 선택자

CSS선택자

: 특정 요소를 선택하여 스타일을 적용할 수 있도록 함 

 

1. 전체선택자

- 모든 HTML요소를 선택하며 별기호(*)로 나타낸다

- 전체를 다루는 만큼 margin, padding등 기본값 설정시에 주로 사용한다

- 모든 요소를 선택하므로 페이지 로딩 속도 저하 위험성이 있으니 주의

// 예시1 //
*{
	color:red;
 }
 
 // 예시2 //
 *.ex{
 	color:red;
 }

 

2. 타입 선택자

- HTML요소를 직접 지칭하는 가장 보편적인 선택자

- CSS를 적용할 대상으로 HTML요소의 이름을 직접 사용하여 선택할 수 있음

// 예시 //
<style>
	h2{
    	color:red;
    }
</style>

 

 

 

3. 속성 선택자

- 특정 속성(Attribute)를 갖거나 특정 속성이 특정 값 등을 갖고 있는 요소(element)를 선택함

 

h1[title] // title속성을 가진 h1요소를 선택
h1[title="ex"] // title속성의 값이 ex인 h1요소 선택 (속성이 ‘ex’만 일정)
h1[title~="ex"] // title속성의 값이 ex를 포함한 h1요소를 선택(단어기준)
h1[title |="ex"] // title속성의 값이 ex이거나 ex-로 시작하는 h1요소 선택(단어)
h1[title^="ex"] // title속성의 값이 ex로 시작하는 h1요소를 선택(문자열기준)
h1[title$="ex"] // title속성의 값이 ex로 끝나는 h1요소 선택(문자열)
h1[title*="ex"] // title속성의 값이 ex를 포함한 h1요소 선택(문자열)

 

이 외, 클래스/IO/복합/가상클래스/구조적가상클래스/언어/부정/목정 선택자 등이 존재한다.