선택자

선택자 (Selector)

HTML 문서의 특정 영역이나 요소 등을 선택해줄 수 있는 키워드

기본 선택자	관계 선택자	기타 선택자
전체 선택자	종속 선택자	가상 선택자
태그 선택자	하위 선택자	속성 선택자
클래스 선택자	자식 선택자
아이디 선택자	인접 선택자
그룹 선택자	형제 선택자

기본 선택자

선택자 종류	정의	기호	예시 코드
전체 선택자	모든 요소를 선택하는 선택자	*	* { margin: 0; padding: 0; }
태그 선택자	특정 HTML 태그를 선택하는 선택자	태그명	p { color: red; }
클래스 선택자	특정 클래스 이름을 가진 요소를 선택하는 선택자	.클래스명	.button { background-color: blue; }
아이디 선택자	특정 아이디를 가진 요소를 선택하는 선택자	#아이디명	#header { background-color: green; }
그룹 선택자	여러 선택자를 묶어 동일한 스타일을 적용	선택자1, 선택자2	h1, h2, h3 { color: purple; }

관계 선택자

선택자 종류	정의	기호	예시 코드
종속 선택자	기본 선택자에 추가하여 특정 범위 내에서 특정 클래스나 아이디 등으로 제한하는 선택자	태그.클래스명 또는 태그#아이디	div.title { color: blue; }
하위 선택자	부모 요소 내에 존재하는 모든 하위 요소를 선택	선택자 선택자	div p { color: gray; }
자식 선택자	부모 요소의 직계 자식만을 선택	부모 선택자 > 자식 선택자	ul > li { color: blue; }
인접 선택자	특정 요소 바로 다음에 위치한 형제 요소를 선택	선택자1 + 선택자2	h1 + p { margin-top: 10px; }
형제 선택자	특정 요소 이후에 나오는 모든 형제 요소를 선택	선택자1 ~ 선택자2	h1 ~ p { color: orange; }

기타 선택자

선택자 종류	정의	기호	예시 코드
가상 선택자	특정 상태에 있는 요소나 특정 요소의 일부분을 선택	:: 또는 :	a:hover { color: red; }
속성 선택자	특정 속성을 가진 요소를 선택	[속성명]	[type="text"] { border: 1px solid gray; }