CSS 선택자는 웹 페이지에서 요소를 스타일링하는 데 사용됩니다. 선택자의 ‘specificity(구체성)’는 스타일 우선순위에 영향을 미치는 중요한 요소입니다.

선택자 Specificity란?

선택자의 specificity는 해당 선택자가 얼마나 구체적인지를 나타내는 값입니다. 이 값은 각 선택자에 일종의 가중치를 부여하여 우선순위를 정합니다.

예를 들어, 아래의 각각의 선택자마다 구체성이 있습니다:

• 요소 선택자(p)
• 클래스 선택자(.example)
• ID 선택자(#example)
• 인라인 스타일(style 속성)

이 세부분을 조합하여 우선순위를 계산할 수 있습니다.

구체성 계산 방법

구체성은 아래와 같이 계산됩니다:

1. 요소 선택자의 경우 1, 클래스 선택자는 10, ID 선택자는 100입니다.
2. 스타일 속성은 가장 높은 구체성인 1000을 가집니다.

구체성은 각 부분의 값들을 합산하여 계산됩니다.

예시

다음 예제는 다양한 선택자가 어떻게 우선순위에 영향을 미치는지 보여줍니다:

#sidebar ul li a { ... } /* 구체성: 110 (0, 1, 1, 3) */
body.sidebar .warning { ... } /* 구체성: 20 (0, 1, 1, 2) */
.warning { ... } /* 구체성: 10 (0, 0, 1, 1) */
p a { ... } /* 구체성: 2 (0, 0, 1, 1) */

위의 예제에서, #sidebar ul li a의 구체성이 가장 높기 때문에 이 스타일이 적용됩니다.

결론

구체성은 CSS 스타일링에서 선택자의 우선순위를 이해하는 데 중요한 개념입니다. 이를 이해하면 스타일 충돌을 피하고 원하는 스타일을 적용시킬 수 있습니다.

이것이 CSS 선택자의 specificity에 관한 간단한 소개였습니다. 구체성의 개념은 CSS 스타일링을 다룰 때 유용하게 활용될 수 있습니다.