CSS 선택자 종류와 우선순위 개념 정리

웹 개발에서 CSS(종속적 스타일링 시트)는 페이지의 비주얼을 구성하는 중요한 역할을 합니다. 그 중에서도 CSS 선택자는 특정 요소에 스타일을 적용할 수 있는 방법을 제공합니다. 이번 포스트에서는 다양한 CSS 선택자의 종류와 우선 순위 개념을 정리하고, 각 선택자의 용도에 대해 살펴보도록 하겠습니다.

CSS 선택자란?

CSS 선택자는 스타일을 적용할 HTML 요소를 지정하는 방식입니다. 즉, 특정 HTML 태그, 클래스를 지닌 요소, ID를 가진 요소를 대상으로 스타일링을 가능하게 합니다. 선택자는 다양한 종류가 있으며, 각기 다른 방법으로 요소를 선택할 수 있습니다.

CSS 선택자의 종류

1. 타입 선택자 (Type Selector)

타입 선택자는 HTML 요소의 이름을 기반으로 스타일을 적용합니다. 예를 들어, 다음과 같은 코드는 모든 p 태그에 대해 텍스트 색을 빨간색으로 설정합니다.

p {
  color: red;
}

2. 클래스 선택자 (Class Selector)

클래스 선택자는 여러 요소에 공통된 스타일을 적용하기 위해 사용됩니다. HTML에서 class 속성으로 정의된 요소들에 대해 스타일을 쉽게 적용할 수 있습니다. 다음의 코드 예시는 class가 popup인 모든 요소에 대해 글꼴 크기를 지정합니다.

.popup {
  font-size: 11px;
}

3. ID 선택자 (ID Selector)

ID 선택자는 해당 요소에 고유한 식별자를 부여할 때 사용합니다. ID는 한 페이지 내에서 유일해야 하며, # 기호를 사용하여 선택합니다. 아래 예시와 같이 #header ID를 가진 요소의 텍스트 정렬을 설정할 수 있습니다.

#header {
  text-align: center;
}

4. 전체 선택자 (Universal Selector)

전체 선택자는 모든 HTML 요소에 적용됩니다. * 기호로 표시되며, 다음과 같이 사용할 수 있습니다.

* {
  margin: 0;
  padding: 0;
}

위 코드는 모든 요소의 여백과 안쪽 여백을 없애는 용도로 사용됩니다.

5. 자식 선택자 (Child Selector)

자식 선택자는 특정 요소의 직계 자식에게만 스타일을 적용합니다. 예를 들어, body > p는 body 내의 직계 자식인 p 요소에만 적용됩니다.

body > p {
  line-height: 1.3;
}

6. 자손 선택자 (Descendant Selector)

자손 선택자는 특정 요소의 모든 자식 요소를 선택합니다. 공백으로 분리된 선택자들을 사용하여 표현합니다. 예를 들어, ul li a는 모든 li의 자손인 a 요소를 선택할 수 있습니다.

7. 인접 형제 선택자 (Adjacent Sibling Selector)

인접 형제 선택자는 선택된 요소 바로 뒤에 있는 형제 요소를 선택합니다. + 기호를 사용하여 표현하며, 아래 예제와 같이 활용할 수 있습니다.

h1 + h2 {
  text-indent: 5px;
}

8. 속성 선택자 (Attribute Selector)

속성 선택자는 특정 속성을 가진 요소를 선택하는 데 사용됩니다. 다양한 방식으로 표현할 수 있으며, 예를 들어 a[title]는 title 속성이 있는 모든 a 태그를 선택합니다.

• selector[attr] – 해당 속성을 가진 모든 요소
• selector[attr="value"] – 속성값이 특정 값과 일치하는 요소
• selector[attr^="value"] – 속성값이 특정 문자열로 시작하는 요소

9. 가상 클래스 선택자 (Pseudo-class Selector)

가상 클래스 선택자는 요소의 상태에 따라 스타일을 제어합니다. 예를 들어, 링크가 방문하기 전인 상태에서 스타일을 다르게 하고자 할 때 사용할 수 있습니다.

a:link {
  color: red;
}

10. 가상 요소 선택자 (Pseudo-element Selector)

가상 요소 선택자는 특정 부분을 선택하여 스타일을 적용합니다. 예를 들어, 문단의 첫줄만 스타일링하고 싶다면 ::first-line을 사용할 수 있습니다.

p::first-line {
  font-weight: bold;
}

CSS 선택자의 우선 순위

CSS 선택자는 우선 순위에 따라 적용되는 스타일이 결정됩니다. 일반적으로 ID 선택자 > 클래스 선택자 > 타입 선택자 순으로 우선 순위가 매겨집니다. 또한, 동일한 선택자가 여러 번 사용될 경우 나중에 선언된 스타일이 우선합니다.

특별히, !important를 사용하여 특정 스타일을 강제로 적용할 수 있습니다. 예를 들어, 다음과 같이 사용할 수 있습니다.

p {
  color: red !important;
}

결론

CSS 선택자는 웹 페이지의 스타일을 정의하는 데 있어 매우 중요한 요소입니다. 다양한 선택자를 이해하고 활용하면, 보다 효율적으로 스타일링을 할 수 있습니다. 특히 선택자의 우선 순위를 이해하고 활용하면, 충돌을 피할 수 있습니다. 앞으로 CSS를 활용하여 멋진 웹 페이지를 만들어보시기 바랍니다!

질문 FAQ