본문 바로가기
css

CSS 특이성 점수 체계 설명

by code-box 2022. 1. 27.
반응형

특이성은 계단식 알고리즘의 핵심 부분이다. 간단히 말해서, 특이성은 어떤 CSS 규칙이 특정 HTML 요소에 대해 가장 구체적인지를 결정하는 데 사용되는 알고리즘이다. 이를 위해 채점 시스템을 사용한다.

이 기사에서는 이 채점 시스템이 어떻게 작동하는지 심층적으로 이해하고, 실제로 CSS의 특수성을 배우게 될 것이다.

당신은 CSS의 특수성을 기본적인 형태로 이미 알고 있을 것입니다. 하지만 내 말 믿어봐, 그건 더 특별함을 높이기 위해 후손 선택자들을 결합하는 것보다 더 많은 것이 있어.

우선 계단식 효과에 대해 설명하겠습니다. 다음과 같은 코드를 생각해 보십시오.

 
<head>
    <style>
      p {
              color: red;
      }
    p {
            color: purple;
    }
  </style>
</head>
<body>
      <div><p>lorem ipsum</p></div>
        </body>

위의 경우, 당신은 문단의 색상이 무엇이 될 것으로 예상합니까? 글쎄, 보라색이야. 보라색은 빨간색 다음에 오기 때문입니다. 이것은 CSS에서의 계단식 효과입니다. 두 가지 규칙이 동일한 요소에 적용되면 나중에 적용되는 규칙이 적용됩니다.

하지만 한가지 문제가 있다. 그 두 규칙은 같은 특수성을 지녀야 한다.

위의 경우 두 번째 규칙을 선택한 이유는 둘 다 단순한 단락 태그이기 때문입니다. CSS를 좀 바꾸자.

<head>
    <style>
      div p {
              color: red;
      }
    p {
            color: purple;
    }
  </style>
</head>
<body>
      <div><p>lorem ipsum</p></div>
        </body>
 

이제, 단락의 색은 빨간색이 될 것입니다. 첫 번째 선택기가 두 번째 선택기보다 더 구체적이기 때문입니다. 그래서 주문은 더 이상 문제가 되지 않습니다.

하지만 어떻게 CSS가 그 특수성을 정확히 알 수 있을까요? CSS는 이 셀렉터가 다른 셀렉터보다 더 특이하다고 어떻게 판단합니까? 음, 그들은 숫자를 사용합니다.

CSS는 동일한 요소를 대상으로 하는 셀렉터에 대한 점수 시스템을 가지고 있다. 셀렉터가 구체적일수록 점수가 높아진다. 점수가 가장 높은 셀렉터만 적용됩니다.

점수 체계

CSS가 채용한 점수 체계는 좀 까다롭다. 당신의 CSS 생활을 훨씬 쉽게 만들어 줄 온라인 계산기를 이 게시물의 뒷부분에 소개할게요.

 

지금은 점수가 3자리라고 생각하시면 됩니다.

첫 번째 자리(오른쪽부터)는 원소 및 유사 요소 선택기의 수입니다.

두 번째 숫자는 클래스, 의사 클래스 및 특성 선택기의 수입니다.

세 번째 숫자는 ID 선택기의 수입니다.

score

 

첫 번째 사례에서는 다음과 같은 CSS가 있었습니다.

p {
   color: red;
}
p {
    color: purple;
}

두 경우 모두 우리는 요소 선택기만 가지고 있었기 때문에 둘 다 001이었습니다.

하지만, 두 번째 사건의 경우

div p {
   color: red;
}
p {
    color: purple;
}
 

첫 번째 규칙에는 두 개의 요소 선택기가 있습니다. 그래서 첫 번째 셀렉터의 특이성은 002이고 두 번째 셀렉터는 001입니다. 그래서 첫 번째 선택기가 적용되었다.

specificity

하지만 학급 선택기가 있으면 어떻게 될까?

<head>
    <style>
      .para {
              color: red;
      }
    div p {
            color: blue;
    }
    p {
            color: green;
    }
  </style>
</head>
<body>
      <div>
        <p class="para">lorem ipsum</p>
  </div>
</body>

이 경우 첫 번째 선택기의 특이성은 010입니다.

 

두 번째 셀렉터는 002입니다.

세 번째 셀렉터는 001입니다.

그래서 여기서는 첫 번째 셀렉터의 특이성이 가장 높기 때문에 빨간색이 될 것입니다.

까다로운 부분은, 만약 우리가 11개의 요소 선택기를 가지고 있다면 어떻게 될까요? 학급 선택자를 능가할 수 있을까?

이런 상황을 상상해보라. (나는 네가 절대 그런 상황에 빠지지 않기를 바란다.)

 
<head>
    <style>
      .para {
              color: red;
      }
    div div div div div div div div div div div p {
            color: blue;
    }
  </style>
</head>
<body>
      <div>
        <div>
          <div>
            <div>
              <div>
                <div>
                  <div>
                    <div>
                      <div>
                        <div>
                          <div>
                            <div>
                              <p class="para">lorem ipsum</p>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</body>

위의 경우, 첫 번째 선택기의 특이성은 010입니다.

두 번째 셀렉터는 12개의 요소 셀렉터가 있으므로 0012의 특수성을 가집니다.

이 경우, 두 번째 셀렉터는 더 높은 특수성을 가지고 있으므로 적용해야 합니다, 그렇죠? 아니요.

이것이 득점 시스템의 까다로운 부분이다. 명확한 선호 순서가 있습니다. 클래스, 의사 클래스 또는 특성 선택기가 있으면 요소 또는 의사 요소 선택기를 완전히 재정의합니다.

 

ID 선택기가 있으면 클래스, 의사 클래스, 속성, 요소 또는 의사 요소 선택기를 완전히 재정의합니다.

겉보기에는 더 높은 특이성 점수를 얻기 위해 그것들을 조합해도 문제가 되지 않습니다. 특수성 점수의 각 자릿수는 각자의 리그에 속합니다.

따라서 클래스 선택기가 있으면 모든 요소와 의사 요소 선택기는 더 이상 중요하지 않습니다.

동점일 경우는 예외로 한다. 다음과 같은 시나리오를 생각해 보십시오.

.para {
    color: red;
}

.para {
    color: blue;
}
 

여기에는 클래스 선택기 두 개가 있으며 두 개의 특성 점수는 동일합니다. 그래서 두 번째로 오기 때문에 파란색이 될 거예요. 이제 첫 번째 선택기를 수정하겠습니다.

.para p {
    color: red;
}

.para {
    color: blue;
}

여기 학급 선택자들의 짝이 있습니다. 하지만 이 경우 첫 번째 것은 원소 선택기도 가지고 있습니다. 클래스에 관한 한 특수성이 동일하기 때문에 요소 선택기가 최종 결정을 내릴 것이다. 그래서 빨간색이 될 거예요.

마찬가지로, ID 선택기가 있다면 특이점수는 100이 되어 다른 두 가지는 상관이 없습니다. 물론 신분증에는 동점이 없다.

범용 선택기의 특이성

 

범용 선택기는 종종 사용자 에이전트 스타일시트를 재설정하는 데 사용됩니다. 범용 셀렉터는 특수성이 0이므로 사실상 모든 셀렉터가 범용 셀렉터의 스타일을 오버라이드할 수 있습니다.

* {
    margin: 0;
    padding: 0;
}

p {
    /* overrides */
    padding: 10px;
}

인라인 스타일의 특이성

인라인 스타일은 1000의 특수성을 추가합니다. 따라서 ID, 클래스 및 요소를 덮어씁니다.

<head>
    <style>
      #para {
              color: red;
      }
  </style>
</head>
<body>
      <p id="para" style="color:blue">lorem ipsum</p>
</body>
 

인라인 스타일링이 좀 더 구체적이기 때문에 파란색이 될 거예요.

!중요 규칙의 특수성

!중요한 규칙은 우리가 얼마나 구체적인 것을 얻어야 하는지 알 수 없을 때 스타일을 재정의하기 위해 종종 사용된다. !중요 규칙은 특이성에 10,000점을 추가하고 ID, 클래스, 요소 및 인라인 스타일을 재정의합니다.

#ID {
    color: red;
}

p {
    /* higher specificity */
    color: blue !important;
}

!중요한 규칙 및 인라인 스타일링(때로는 ID도 마찬가지)은 잘못된 관행으로 간주됩니다. 당신은 캐스케이드를 이용하여 더 구체적인 스타일링을 할 수 있도록 가능한 한 CSS 규칙을 자유자재로 유지해야 합니다.

 

예외

두 개의 유사 클래스:is()와 :not()에 대해서는 주목할 만한 예외가 있다.

:is() 선택기는 스타일을 적용할 수 있는 선택기 목록을 허용합니다. 예를들면

:is(header, main, footer) p:hover {
    color: red;
    cursor: pointer;
}

이런 경우, 머리말, 기본 및 바닥글 아래에 있는 모든 문단은 호버 효과를 가집니다.

 

여기서 :is()는 그 자체로 어떠한 특이성도 가지고 있지 않다. :is() 안에 들어오는 모든 선택기들은 그 특이성을 더할 것이다.

:not() 의사 클래스에도 유사한 예외가 부여됩니다.

:not() pseduo 클래스는 스타일이 적용되지 않도록 할 수 있는 선택기 목록을 허용한다.

:not(p) {
    color: blue;
}

이 경우 모든 단락 요소는 파란색이 적용되지 않습니다.

 

여기도 :not() pseduo 클래스는 특수성을 증가시키지 않는다. 하지만 안에 있는 셀렉터는 그렇습니다.

최종 발언

간단히 말해서, CSS는 채점 시스템을 사용하여 어떤 셀렉터가 더 구체적인지를 결정합니다. 점수가 높은 선택기가 적용됩니다.

점수는 주로 요소/의사 요소 선택기, 클래스/의사 클래스/속성 선택기 및 ID가 기여하는 3자리 숫자로 구성됩니다.

인라인 스타일링은 !중요한 규칙에 의해 실제로 덮어쓰여지는 위의 3가지를 모두 재정의합니다.

 

가장 좋은 방법은 클래스 및 요소 선택기를 고수하여 스타일을 적용하는 것입니다.

그리고 나중에 더 구체적인 스타일을 추가할 수 있도록 스타일을 최대한 구체적이지 않게 유지합니다.

링크: https://specificity.keegan.st/(특이성 계산기)

저작자표시

'css' 카테고리의 다른 글

Flexbox를 한 단계 업그레이드  (0) 2022.01.27
로그인 - 등록/로그인 - 로그인  (0) 2022.01.27
Um breve comentário sobre 층() e camadas em cascata  (0) 2022.01.27
JavaScript 클래스가 있는 응답 메시지 상자  (0) 2022.01.27
CSS Funstuff: 애니메이션 파형  (0) 2022.01.27

관련글

댓글

티스토리툴바