어떤 요소에 스타일을 적용할 것인지에 대한 정보
모든 요소를 선택한다
*(애스터리스크)는 '문서 내의 모든 요소'를 의미하는 기호이다.
*{ color : blue; }
문서 내 모든 글자의 색을 파란색으로 지정한다.
주어진 이름을 가진 요소를 선택한다. "유형 선택자"라고도 한다.
주어진 이름을 가진 요소가 다수일 경우, 해당 요소들을 모두 선택한다.
p { color : blue; }
문서 내 모든 p 태그 요소의 글자 색을 파란색으로 지정한다.
주어진 class 속성값을 가진 요소를 선택한다.
주어진 class 속성값을 가진 요소가 다수일 경우, 해당 요소들을 모두 선택한다.
.text { color : blue; }
문서 내 class가 'text'인 모든 요소의 글자 색을 파란색으로 지정한다.
주어진 id 속성값을 가진 요소를 선택한다.
id는 고유한 식별자 역할을 하는 전역 속성이다.
#topic { color : blue; }
문서 내 id가 'topic'인 요소의 글자 색을 파란색으로 지정한다.
다양한 유형의 요소를 한꺼번에 선택하고자 할 때 사용한다.
쉼표를 이용해 선택자를 그룹화한다.
h1, p, div { color : blue; }
문서 내 모든 h1, p, div 태그 요소의 글자 색을 파란색으로 지정한다.
기본적으로 나중에 작성된 스타일이 적용된다.
선택자가 다르지만 요소가 겹치는 경우, 선택자 우선순위에 의해 적용될 스타일이 결정된다.
아이디 선택자 > 클래스 선택자 > 태그 선택자