CSS selector 우선순위

핵심 개념

CSS 선택자 우선순위(specificity)는 !important > inline style > ID(#) > class(.) > tag 순서입니다. 같은 우선순위면 나중에 선언된 규칙이 적용됩니다. 선택자가 구체적일수록 우선순위가 높아집니다. 각 선택자의 color를 지우며 어떤 규칙이 살아남는지 확인하십시오.

코드 분석

CSS3📋 코드 (6줄)

<style>.sp-base{color:blue;font-family:monospace;padding:6px;margin-bottom:4px;display:block;font-size:13px;}.sp-class{color:green;}.sp-combo.sp-class{color:orange;}#sp-id{color:red;}</style>
<span class='sp-base'>tag만 — blue</span>
<span class='sp-base sp-class'>class 추가 — green</span>
<span class='sp-base sp-class sp-combo'>class 중복 — orange</span>
<span class='sp-base sp-class' id='sp-id'>ID 추가 — red (ID wins)</span>
<span class='sp-base' style='color:#10b981;'>inline style — 직접 지정 (inline wins)</span>

AI 프롬프트

🤖 AI에게 잘 물어보는 법 — 모델·전략별 프롬프트

Claude

무료: Sonnet 4.6 / Pro $20/mo: Opus 4.6

이 CSS 'CSS selector 우선순위' 코드에서
레이아웃·우선순위·반응형 버그를 찾고
수정 코드와 원인을 단계별로 설명해줘.

ChatGPT

무료: GPT-5.5 / Plus $20/mo: GPT-5.5 Pro

'CSS selector 우선순위'를 사용한 실전 UI 컴포넌트를
3가지 만들어줘. 모바일 반응형까지 포함된 완성 코드로.

Gemini

무료: 2.5 Flash / Pro $19.99/mo: 3.1 Pro

이 CSS 'CSS selector 우선순위' 관련 코드 전체를 분석해서
중복 속성, 미사용 셀렉터, 성능 저하 요소를
우선순위별로 정리해줘.

Grok

무료: Grok 4.1 / SuperGrok $30/mo

'CSS selector 우선순위'가 2026년에도 최선의 방법인지
최신 CSS(컨테이너 쿼리, :has, 서브그리드 등) 기능과 비교해서
솔직히 평가해줘.

⭐ 이것만 기억하세요

CSS selector 우선순위는 이 3가지만 확실히 잡으세요

1.스타일이 적용 안 되는 이유 대부분은 다른 selector가 더 높은 우선순위로 덮어쓰고 있기 때문입니다

2.우선순위는 inline > #id > .class > tag 순이며, 같은 우선순위에서는 나중에 선언된 것이 이깁니다

3.다음 챕터에서 요소를 원하는 도형으로 잘라내는 clip-path를 배웁니다

💬 이 챕터 질문 보기

CSS3 · CH.28 — 질문하거나 답변을 확인하세요

→

진행도 28 / 34

← 커리큘럼으로 ← 목록으로 (CSS3)