CSS 선택자란

CSS 선택자(CSS Selector)는 웹페이지 내에서 특정 HTML 요소를 선택하는 데 이용됩니다.

<div id="post" class="photo">
  <a href="/post/1">게시글1</a>
  <a href="/post/2">게시글2</a>
</div>
<div>
  <a href="/before">이전페이지</a>
  <a href="/next">다음페이지</a>
</div>

위 의 HTML 코드에서 CSS 선택자에 대한 종류는 아래와 같습니다.

선택자	설명
요소 선택자	div 와 a
ID 선택자	#post
클래스 선택자	.photo

게시글1, 2을 모두 선택하기 위한 선택자는 두 가지 방식으로 가능합니다.

선택자	설명
#post a	ID 가 "post" 인 요소 아래의 a 태그
.photo a	클래스가 "photo" 인 요소 아래의 a 태그

아래처럼 "요소 선택자" 만으로 선택하는 경우에는 "게시글1" "게시글2" 외 에 "이전페이지" 와 "다음페이지" 까지 모두 선택이 되기 때문에 피해야 합니다.

선택자	설명
div a	요소가 div 인 요소 아래의 a 태그

CSS 선택자 고급 메뉴얼

https://developer.mozilla.org/ko/docs/Web/CSS/CSS_Selectors