CSS 선택자

1. css 선택자란?

• css를 적용할 대상을 선택자라 한다
• css 선택자를 이용하면 css를 보다 편하게 정리할 수 있다

 

2.기본형식

석택자 { 속성 : 속성값; }
h1 { color : red ; }

 

3.선택자의 종류

[선택자의 종류]

선택자	의미	예제
범용 선택자	문서에있는 모든 요소를 의미한다	*{ } 페이지에 있는 모든 요소를 대상으로 한다
타입 선택자	요소이름을 의미한다	h1, h2, h3 { } <h1>, <h2>, <h3> 요소를 대상으로 한다
클래스 선택자	class 속성의 값이 마침표(.) 이후의 값과 같은 요소를 의미한다	.note{ } class 속성값이 note인 요소를 대상으로 한다 p.note{ } class 속성값이 note인 p 요소를 대상으로 한다
id 선택자	id 속성의 값이 해시기호(#) 이후의 값과 같은 요소를 의미한다	#introduction id 속성의 값이 introduction인 요소를 대상으로 한다
자손 선택자 하위선택자	직계자식 뿐만 아니라 특정요소의 자손 요소를 의미한다	body p { } body 태그 내에 있는 모든 p 태그를 대상으로 한다 두 요소 사이에 다른요소가 중첩돼 있어도 상관 없다
자식 선택자	직계자식 요소를 의미한다	body > p { } body 태그를 부모로 섬기는 p 태그만 대상으로 한다 body 태그 안에 있는 p 태그라도 다른요소를 부모로 섬기면 자식선택자가 아니다 두 요소 사이에 다른요소가 중첩돼 있어도 상관 없다
인접 형제 선택자	바로 옆에있는 요소를 의미한다	div + p { } div 태그 바로 다음에 오는 p 태그를 대상으로 한다 body 태그안의 p태그는 미해당
일반 형제 선택자	형제관계에 있는 요소를 의미한다 (바로 옆에 없어도 된다)	h1 ~ p { } <h1> 요소와 두 <p> 요소가 형제 관계에 있다면 두 <p> 요소에 모두 적용된다