특수성

CSS 팟캐스트 - 003: 구체성

다음 HTML 및 CSS로 작업한다고 가정해 보겠습니다.

<button class="branding">Hello, Specificity!</button>

button {
  color: red;
}

.branding {
  color: blue;
}

여기에는 두 가지 규칙이 있습니다. 하나는 버튼을 빨간색으로, 다른 하나는 파란색으로 표시합니다. 어떤 규칙이 요소에 적용되나요? 특정성에 대한 CSS 사양의 알고리즘 이해 CSS가 경쟁하는 규칙 사이에서 어떻게 결정을 내리는지 이해하는 데 핵심적인 요소입니다.

특수성은 폭포식 구조의 4가지 개별 단계 중 하나입니다. 이는 이전 모듈인 캐스케이드에서 다뤘습니다.

특수성 점수

각 선택기 규칙에는 점수가 매겨집니다. 구체성은 총점이라고 생각하면 되며, 각 선택기 유형은 해당 점수에 해당하는 점수를 얻습니다. 점수가 가장 높은 셀렉터가 이깁니다.

실제 프로젝트에서는 구체성에 따라 분산 작업은 적용할 CSS 규칙이 실제로 적용되는지 일반적으로 점수를 낮게 유지하여 복잡성을 방지합니다. 점수는 필요한 만큼만 높아야 합니다. 목표로 삼는 것이 좋습니다. 향후에는 정말 더 중요한 CSS를 적용해야 할 수도 있습니다. 최고 점수를 얻으면 힘든 일이 될 것입니다.

각 선택기 유형에 점수 매기기

각 선택기 유형에 따라 포인트가 적립됩니다. 이러한 요점을 모두 더하여 선택기의 전반적인 특수성을 계산합니다.

범용 선택기

범용 선택기 (*) 특이성이 없으며 0점입니다. 즉, 점이 1점 이상인 규칙이 규칙을 재정의합니다.

* {
  color: red;
}

요소 또는 유사 요소 선택기

요소 (유형) 또는 pseudo-element 선택기는 1개의 특이점을 갖습니다 .

유형 선택기

div {
  color: red;
}

유사 요소 선택기

::selection {
  color: red;
}

클래스, 의사 클래스 또는 속성 선택기

클래스 pseudo-class 또는 속성 선택기에 10개의 특이성이 적용됩니다.

클래스 선택기

.my-class {
  color: red;
}

유사 클래스 선택기

:hover {
  color: red;
}

속성 선택기

[href='#'] {
  color: red;
}

:not() 의사 클래스 자체는 특이성 계산에 아무것도 추가하지 않습니다. 그러나 인수로 전달된 선택기는 특이성 계산에 추가됩니다.

div:not(.my-class) {
  color: red;
}

이 샘플의 특이성은 11점입니다. 하나의 유형 선택기 (div)와 하나의 클래스가 :not() 내에 있기 때문입니다.

ID 선택기

ID 선택자는 100개의 특이성을 얻으며, 속성 선택기 ([id="myID"])가 아닌 ID 선택기 (#myID)를 사용해야 합니다.

#myID {
  color: red;
}

인라인 스타일 속성

HTML 요소의 style 속성에 직접 적용된 CSS 특이도 점수 1,000점을 받았습니다. 즉, CSS에서 이 광고 단위를 재정의하려면 매우 구체적인 선택자를 작성해야 합니다.

<div style="color: red"></div>

!important rule

마지막으로 CSS 값 끝에 있는 !important는 10,000포인트의 특이성 점수를 받습니다. 하나의 개별 항목이 얻을 수 있는 가장 높은 특이도입니다.

!important 규칙은 CSS 속성에 적용됩니다. 전체 규칙의 모든 항목 (선택기 및 속성)에 동일한 특이성 점수가 부여되지 않습니다.

.my-class {
  color: red !important; /* 10,000 points */
  background: white; /* 10 points */
}

이해도 확인

특수성 점수에 대한 지식 테스트

컨텍스트 내 특수성

요소와 일치하는 각 선택기의 특이성이 함께 더해집니다. 다음 HTML 예를 살펴보세요.

<a class="my-class another-class" href="#">A link</a>

이 링크에는 두 개의 클래스가 있습니다. 다음 CSS를 추가하면 1개의 구체성을 얻을 수 있습니다.

a {
  color: red;
}

이 규칙의 클래스 중 하나를 참조하고 이제 11개의 특이점이 있습니다.

a.my-class {
  color: green;
}

다른 클래스를 선택기에 추가합니다. 이제 21개의 특이점이 있습니다.

a.my-class.another-class {
  color: rebeccapurple;
}

선택기에 href 속성을 추가합니다. 이제 31개의 특이점이 있습니다.

a.my-class.another-class[href] {
  color: goldenrod;
}

마지막으로 모든 항목에 :hover 의사 클래스를 추가합니다. 선택 도구는 결국 41개의 특이점으로 끝납니다.

a.my-class.another-class[href]:hover {
  color: lightgrey;
}

이해도 확인

특수성 점수에 대한 지식 테스트

특이성 시각화

도표와 특이도 계산기에서, 특수성은 종종 다음과 같이 시각화됩니다.

왼쪽 그룹은 id 선택기입니다. 두 번째 그룹은 클래스, 속성, 의사 클래스 선택기입니다. 마지막 그룹은 요소 및 의사 요소 선택기입니다.

참고로 다음 선택기는 0-4-1입니다.

a.my-class.another-class[href]:hover {
  color: lightgrey;
}

이해도 확인

특수성 시각화에 대한 지식 테스트

실질적으로 증가되는 특이성

다음과 같은 CSS가 있다고 가정해 보겠습니다.

.my-button {
  background: blue;
}

button[onclick] {
  background: grey;
}

다음과 같은 HTML을 사용합니다.

<button class="my-button" onclick="alert('hello')">Click me</button>

버튼의 배경이 회색이고 두 번째 선택기가 11개의 특이성 (0-1-1)을 얻기 때문입니다. 이는 유형 선택기 (button)가 하나이고 1포인트, 속성 선택기 ([onclick])는 10포인트입니다.

이전 규칙(.my-button)은 10점(0-1-0)을 획득합니다. 클래스 선택기가 하나 있으므로

이 규칙에 부스트를 적용하려면 다음과 같이 클래스 선택기를 반복합니다.

.my-button.my-button {
  background: blue;
}

button[onclick] {
  background: grey;
}

이제 버튼의 배경이 파란색이 되고 새 선택기가 20점 (0-2-0)의 특이성 점수를 받기 때문입니다.

일치하는 특이성 점수가 최신 인스턴스가 우선함

지금은 버튼 예를 그대로 두고 CSS를 다음과 같이 전환해 보겠습니다.

.my-button {
  background: blue;
}

[onclick] {
  background: grey;
}

버튼의 배경이 회색이고 두 선택자의 특이성 점수가 동일하기 때문입니다 (0-1-0).

소스 순서에서 규칙을 전환하면 버튼이 파란색이 됩니다.

[onclick] {
  background: grey;
}

.my-button {
  background: blue;
}

이는 최신 CSS가 적용되는 유일한 경우입니다. 이렇게 하려면 동일한 요소를 타겟팅하는 다른 선택자의 특이성과 일치해야 합니다.

리소스

• CSS 사양
• 특이성 계산기
• MDN 특이성
• CSS 특수성에 대한 세부사항
• 또 다른 특이성 계산기