노트

CSS 명시도

CSS Specificity

프런트엔드#css · 연결된 개념 5개

쉽게 말하면

CSS 명시도는 올림픽 메달 순위처럼 금메달인 ID 수를 먼저 비교하고, 같으면 은메달인 클래스, 그다음 동메달인 태그를 보는 점수예요. 선택자가 요소를 구체적으로 가리킬수록 이겨요.

비유가 깨지는 곳 메달 순위라서 은메달을 11개 모아도 금메달 하나를 못 이겨요. 그리고 명시도는 레이어까지 비겼을 때만 보는 단계라, 인라인 스타일과 !important는 그보다 먼저 갈려요.

캐스케이드에서 레이어까지 비겼을 때, 선택자가 요소를 얼마나 구체적으로 가리키는지로 승부를 내는 점수. (A, B, C) 세 자리로 매기고 앞자리부터 비교한다.

자리세는 것예
AID 선택자#header
B클래스, 속성 선택자(Attribute Selector), 가상 클래스(Pseudo-class).btn, [disabled], :hover
C태그, 가상 요소(Pseudo-element)div, ::before
#nav .list li a:hover { } /* (1, 2, 2) */
.list li a             { } /* (0, 1, 2) */

직관과 다른 점

  • 속성 선택자([type="email"])는 클래스와 같은 B 자리다 → 속성 선택자와 형제 선택자
  • 자리별 비교라서 낮은 자리를 아무리 쌓아도 높은 자리 하나를 못 이긴다. 클래스 11개 (0, 11, 0)도 ID 하나 (1, 0, 0)에 진다
  • 점수에 들어가지 않는 것: 전체 선택자(Universal Selector) *, 결합자(Combinator, >, +, ~, 공백). .section *의 명시도는 .section 하나만큼인 (0, 1, 0)이다
  • :where()는 안에 무엇을 넣어도 0이다. 라이브러리가 덮어쓰기 쉬운 기본 스타일을 만들 때 쓴다
  • :is(), :not(), :has()는 자신은 0이고 괄호 안에서 가장 센 인자의 점수를 가져온다. :is(#a, .b) span은 (1, 0, 1)이다
  • 완전히 같으면 나중에 선언된 규칙이 이긴다

인라인 스타일과 !important

둘 다 명시도보다 위 단계에서 갈린다. 인라인 스타일은 어떤 선택자 규칙보다 세고, !important는 그마저 이긴다. !important끼리 부딪히면 그때 다시 레이어와 명시도로 비교한다. 명시도를 올려서 이기려 하기보다 @layer로 순서를 정하면 싸움 자체가 줄어든다.

출처: MDN — Specificity: How is specificity calculated?

연결된 개념

이 노트를 가리키는 문서

뜻이 가까운 노트

  • Tailwind CSS

    flex, px-4, text-sm처럼 속성 하나를 담은 유틸리티 클래스(Utility Class)를 마크업에 조합해 스타일을 입히는 CSS 프레임워크. 빌드할 때 소스를 훑어 실제로 쓰인 클래스의 CSS만 만들어 내는 빌드 도구이고, 런타임에 돌아가는 JS(JavaScript)는 없다.

  • CSS-in-JS와 빌드 타임 CSS

    JS(JavaScript) 안에서 스타일을 정의하고, 렌더링할 때 라이브러리가 클래스를 만들어 style 태그로 주입하는 방식. styled-components와 Emotion이 대표다. React 18 이후 서버 컴포넌트(React Server Components)·스트리밍 SSR(Streaming Server-Side Rendering)이 자리 잡으면서 런타임에 CSS를 만드는 방식은 줄고, 빌드할 때 CSS를 뽑는 방식이 늘었다(2026 기준).

  • content-visibility

    화면 밖에 있는 요소의 렌더링을 건너뛰어도 된다고 브라우저에 알려 주는 CSS 속성. auto를 주면 뷰포트에서 멀리 있는 요소의 레이아웃·페인트를 생략하므로, 긴 페이지의 첫 렌더링과 스크롤이 빨라진다.

  • 쌓임 순서와 z-index

    요소가 겹칠 때 무엇이 위에 보일지 정하는 규칙. z-index가 없을 때도 정해진 기본 순서가 있고, z-index는 같은 쌓임 맥락(Stacking Context) 안에서만 비교된다.

  • Sass와 PostCSS

    둘 다 CSS를 변환하는 빌드 도구지만 출발점이 다르다. Sass(Syntactically Awesome Style Sheets)는 자기 언어(SCSS, Sassy CSS)를 CSS로 번역하는 전처리기(Preprocessor)이고, PostCSS는 표준 CSS를 받아 플러그인 체인으로 변환하는 도구다.

보기 옵션