노트

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를 받아 플러그인 체인으로 변환하는 도구다.

보기 옵션