선택자란 무엇인가?
선택자는 CSS 규칙의 첫 번째 부분으로, 스타일을 적용할 HTML 요소를 브라우저에 알려주는 요소 및 기타 용어의 패턴입니다. 쉽게 말하면, 웹 페이지에서 특정 부분만 골라서 색깔이나 모양을 꾸미고 싶을 때 쓰는 방식이라고 생각하면 됩니다. 선택자에 의해 선택되는 요소는 선택자의 대상이라고 합니다. 선택자는 웹 페이지의 HTML 요소를 대상으로 지정하여 스타일을 적용하는 데 사용되며, 이를 통해 세밀한 정밀도로 요소를 선택할 수 있습니다.
선택자는 유형, 클래스 및 ID 선택자, 속성 선택자, 결합자 등 다양한 유형의 선택자가 있습니다. 오늘은 그중에서 유형, 클래스 및 ID 선택자에 대해서 알아보겠습니다.
유형, 클래스 및 ID 선택자
유형, 클래스 및 ID 선택자는 CSS 선택자의 여러 그룹 중 하나입니다. 이 그룹에는 다음과 같은 선택자들이 포함됩니다.
- 유형 선택자 (Type Selector): HTML 요소의 이름 자체를 대상으로 합니다. 예를 들어,
h1은 모든<h1>요소를 선택하고,p는 모든<p>요소를 선택합니다. 이러한 선택자는 해당 유형의 페이지에 있는 모든 요소를 선택하므로 다른 선택자에 비해 구체성이 낮습니다. - 클래스 선택자 (Class Selector): HTML 요소의
class속성 값을 대상으로 합니다. 클래스 이름 앞에 마침표(.)를 붙여 사용합니다. 예를 들어,.box또는.special과 같이 사용될 수 있습니다. 동일한 클래스를 가진 여러 요소에 스타일을 적용할 수 있습니다. 클래스 선택자는 유형 선택자보다 더 구체적입니다. 요소 선택자와 클래스 선택자를 함께 사용하여li.special과 같이 특정 요소 유형과 특정 클래스를 모두 가진 요소를 대상으로 지정할 수도 있습니다. - ID 선택자 (ID Selector): HTML 요소의 고유한
id속성 값을 대상으로 합니다. ID 이름 앞에 해시 기호(#)를 붙여 사용합니다. 예를 들어,#unique와 같이 사용됩니다. ID 선택자는 클래스 선택자보다 훨씬 더 구체적입니다. 페이지에서 각 ID는 고유해야 하며, 특정 대상을 가리키므로 매우 구체적입니다.
<!-- index.html -->
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1>유형 선택자 (Type Selector)</h1>
<p class="highlight">클래스 선택자 (Class Selector)</p>
<p>기본 문단입니다.</p>
<div id="special">ID 선택자 (ID Selector)</div>
</body>
</html>/* style.css */
/* 유형 선택자: 모든 h1 태그 */
h1 {
color: blue;
font-size: 24px;
}
/* 클래스 선택자: class="highlight" 요소 */
.highlight {
color: red;
background-color: yellow;
}
/* ID 선택자: id="special" 요소 (고유해야 함) */
#special {
color: white;
background-color: green;
padding: 10px;
}
이 외에도 속성 선택자 (요소에 특정 속성이 있거나 특정 속성 값을 가졌는지에 따라 선택), 의사 클래스 (요소의 특정 상태를 스타일링, 예: :hover, :first-child), 의사 요소 (요소의 특정 부분을 선택하거나 콘텐츠 생성, 예: ::first-line, ::before), 그리고 결합자 (다른 선택자를 결합하여 요소 간의 관계나 위치에 따라 대상 지정, 예: 공백, >, +, ~) 등의 다른 선택자 유형도 있습니다.
동일한 CSS 규칙을 여러 요소에 적용하고 싶을 때, 개별 선택자를 쉼표(,)로 구분하여 선택자 목록으로 결합할 수 있습니다.
이러한 다양한 선택자 유형의 존재와 그들이 대상을 지정하는 방식은 CSS의 계단식(cascade) 및 우선 순위(specificity) 개념과 깊은 관련이 있습니다. 우선 순위는 선택자의 구체성을 측정하며, 더 구체적인 선택자가 적용된 규칙이 덜 구체적인 규칙보다 우선하여 적용됩니다.
유형 선택자는 우선 순위가 가장 낮고, 클래스 선택자는 그보다 높으며, ID 선택자는 가장 높은 우선 순위를 가집니다. 같은 우선 순위를 가진 두 규칙이 충돌할 때는 소스 코드 상에서 마지막에 나오는 규칙이 적용됩니다. 브라우저 개발자 도구를 사용하면 어떤 CSS 규칙이 요소에 적용되는지, 그리고 어떤 규칙이 다른 규칙에 의해 재정의되는지 확인할 수 있어서 디버깅에 유용합니다.
마치며
CSS 선택자에 대한 내용이 많아 유형별로 따로 다룰 예정입니다. 다른 내용이 궁금하신 분들은 이어지는 글을 참고해주세요. MDN 문서의 내용을 참고하여 적었으니 해당 사이트에서 확인하시는 것도 좋을 것 같습니다.
도움이 되셨길 바랍니다 :)
출처
CSS 선택자 - Web 개발 학습하기 | MDN
CSS 에서, 선택자는 스타일을 지정할 웹 페이지의 HTML 요소를 대상으로 하는 데 사용됩니다. 사용 가능한 다양한 CSS 선택자가 있으며, 스타일을 지정할 요소를 선택할 때 세밀한 정밀도를 허용합
developer.mozilla.org
'Front-End > CSS' 카테고리의 다른 글
| CSS 선택자: 결합자(Combinator) (0) | 2025.06.13 |
|---|---|
| CSS 레이아웃: Floats (0) | 2025.06.12 |
| CSS 선택자: 의사 클래스와 의사 요소 (0) | 2025.06.12 |
| CSS 선택자: 속성 선택자 (0) | 2025.06.11 |
| CSS Basics: CSS 작동 방식 (0) | 2025.06.09 |
