특수성

CSS 팟캐스트 - 003: 특수성

다음 HTML 및 CSS를 사용한다고 가정해 보겠습니다.

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

button {
  color: red;
}

.branding {
  color: blue;
}

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

특수성은 마지막 모듈인 캐스케이드에서 다룬 캐스케이드의 고유한 네 가지 단계 중 하나입니다.

특수성 점수

각 선택기 규칙에 점수가 매겨집니다. 특정성은 총점이라고 생각할 수 있으며 각 선택기 유형에 따라 점수가 매겨집니다. 점수가 가장 높은 선택기가 선택됩니다.

실제 프로젝트에서 구체적이면서 균형을 잡는 것은 적용할 것으로 예상되는 CSS 규칙이 실제로 적용되도록 하는 동시에 복잡성을 방지하기 위해 일반적으로 점수를 낮게 유지하는 것입니다. 점수는 가능한 최고 점수를 목표로 하지 않고 필요한 만큼만 높아야 합니다. 향후에는 정말로 더 중요한 CSS를 적용해야 할 수도 있습니다. 최고 점수를 받으면 어려운 일을 하게 됩니다.

각 선택기 유형 채점

선택기 유형마다 포인트가 적립됩니다. 이 모든 포인트를 합산하여 선택자의 전반적인 특정성을 계산합니다.

범용 선택기

범용 선택기 (*)는 특이성이 없으며 0점을 얻습니다. 즉, 1개 이상의 점이 있는 규칙은 그보다 우선합니다.

* {
  color: red;
}

요소 또는 가상 요소 선택기

요소 (유형) 또는 의사 요소 선택기는 1포인트 특이점을 받습니다 .

유형 선택기

div {
  color: red;
}

유사 요소 선택기

::selection {
  color: red;
}

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

클래스, 의사 클래스 또는 속성 선택기는 특수성 10점을 받습니다.

클래스 선택기

.my-class {
  color: red;
}

유사 클래스 선택기

:hover {
  color: red;
}

속성 선택기

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

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

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

이 샘플은 유형 선택기 (div)가 하나이고 :not() 내부에 클래스가 하나 있으므로 특정성은 11점입니다.

ID 선택기

속성 선택기 ([id="myID"])가 아닌 ID 선택기 (#myID)를 사용하는 경우 ID 선택기는 100포인트의 구체성을 가져옵니다.

#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 구체성에 관한 세부사항
• 다른 특수성 계산기