자주 사용하는 CSS 선택자

CSS 선택자란 CSS를 적용할 때 특정 HTML 요소에 style을 적용하기 위한 개념이다. 스타일을 적용하기 위한 요소 필터라고 이해하면 된다.

전체 선택자: *

* {
  font-family: "Noto Sans KR", sans-serif;
  margin: 0;
  padding: 0;
}

모든 요소를 선택한다. #container *처럼 자식 선택자에도 사용할 수 있다.

유형 선택자: X

a {
  color: red;
}

문서 내 모든 X 요소를 선택한다.

클래스 선택자: .X

.container {
  margin: 1em;
}

특정 클래스 .X에 해당하는 모든 요소를 선택한다.

ID 선택자: #X

#content {
  background-color: blue;
}

#X와 동일한 ID를 가진 요소를 선택한다.

자손 결합자: X Y

li li {
  list-style-type: circle;
}

요소 X 아래에 있는 모든 자손 요소 Y를 선택한다. 이 때 Y를 자식 선택자라 한다.

자식 결합자: X > Y

div > span {
  background-color: blue;
}

요소 X 바로 아래에 있는 자식 요소 Y만 선택한다. 이 때 Y를 자손 선택자라 한다.

인접 형제 결합자: X + Y

ul + p {
  color: red;
}

요소 X와 같은 부모를 공유하면서 바로 뒤에 있는 요소 Y만 선택한다.

일반 형제 결합자: X ~ Y

img ~ p {
  color: red;
}

X + Y와 다르게, 요소 X와 같은 부모를 공유하면서 뒤에 있는 모든 요소 Y를 선택한다.

참고 자료

• CSS 선택자 | MDN Web Docs
• 반드시 기억해야 하는 CSS 선택자 30개 | envatotuts+