CSS 선택자 101: 정밀하게 요소 타깃팅

Source: Dev.to

소개

CSS 선택자는 스타일을 적용하고자 하는 HTML 요소를 선택할 수 있게 해주는 패턴입니다. 선택자가 없으면 페이지에 색상, 글꼴, 레이아웃을 적용할 수 없습니다.

Element Selector

특정 유형의 모든 요소를 대상으로 합니다. 예를 들어 모든 단락을 선택합니다:

p {
  color: blue;
}

모든 단락 텍스트가 파란색으로 표시됩니다.

Class Selector

.을 클래스 이름 앞에 사용합니다.

.highlight {
  color: red;
}

Test

Test

ID Selector

ID는 단일 특정 요소를 위한 고유 식별자입니다. 각 ID는 페이지당 한 번만 사용되어야 합니다.

#header {
  font-size: 30px;
}

## Heading

Group Selectors

콤마(,)를 사용해 선택자를 그룹화하면 여러 요소에 동일한 스타일을 적용할 수 있습니다.

h1, h2, h3 {
  font-family: arial;
}

Descendant Selectors

다른 요소 안에 포함된 요소를 대상으로 합니다.

article p {
  color: blue;
}

Selector Priority: The Basics

여러 선택자가 동일한 요소를 대상으로 할 때, CSS는 특이도(specificity)를 기준으로 적용할 스타일을 결정합니다:

ID Selector > Class Selector > Element Selector

What a color?