동일한 요소를 가리키면서 충돌하는 CSS 규칙이 두 개 이상 있는 경우,
브라우저는 몇 가지 규칙에 따라서 어떤 규칙이 가장 명확해서 우선할 지를 결정합니다.
명시도(specificity)를 어떤 스타일 선언이 궁극적으로 요소에 적용될 지를 결정하는 점수/순위로 생각하십시오.
전역 셀렉터(global selector) (*)는 명시도가 낮고, ID 셀렉터는 매우 구체적입니다!
Note:
CSS 규칙이 일부 요소에 적용되어야 한다고 여길지라도,
일부 요소에 적용되지 않는 일반적인 이유가 바로 명시도 때문입니다.
모든 셀렉터는 명시도 계층(Specificity Hierarchy)에서 각자의 자리를 차지합니다.
셀렉터의 명시도 수준을 정의하는 네 가지 범주가 있습니다.
Inline styles - 인라인 스타일은 스타일을 지정할 요소에 직접 첨부됩니다.
예: <h1 style="color: #ffffff;">.
IDs - ID는 #navbar 처럼, 페이지 요소의 고유 식별자입니다.
Classes, attributes and pseudo-classes
- 이 범주에는 .classes, [attributes] 및 :hover, :focus 등과 같은 의사 클래스(pseudo-classes)가 포함됩니다.
Elements and pseudo-elements
- 이 범주에는 요소 이름과 h1, div, :before 및 :after와 같은 의사 요소(pseudo-elements)가 포함됩니다.
명시도를 계산하는 방법을 외우세요.
0에서 시작하고, 스타일 속성에 1000을 추가하고
각 ID에 100을 추가하고, 각 속성과 클래스 또는 의사 클래스에 10을 추가하고,
각 요소 이름 또는 의사 요소에 1을 추가하십시오.
다음 세 가지 코드를 생각해보세요.
A: h1 B: #content h1 C: <div id="content"><h1 style="color: #ffffff">Heading</h1></div>
A의 명시도 : 1개 요소(h1)가 있으므로 A의 명시도는 1
B의 명시도 : 1개의 ID와 1개 요소가 있으므로 B의 명시도는 101
C의 명시도 : inline styling 이어서, C의 명시도는 1000
1 < 101 < 1000이므로, 세 번째 규칙 (C)이 더 높은 수준의 명시도를 가지므로, 규칙 (C)가 적용됩니다.
동일한 명시도: 가장 마지막 규칙이 인정됩니다.
- 동일한 규칙이 외부 스타일 시트에 두 번 작성되면, 스타일 시트의 하위 규칙이 스타일을 지정할 요소에 더 가까워서 적용됩니다.
<!DOCTYPE html> <html lang="en"> <head> <style> h1 {background-color: crimson;} h1 {background-color: yellowgreen;} // This color is applied. </style> </head> <body> <h1>This is heading 1</h1> </body> </html>
상기 예제에서 CSS에서 후자의 규칙이 항상 적용됩니다.
ID 셀렉터는 속성 셀렉터보다 더 높은 명시도를 가집니다. - 다음 세 코드 줄을 살펴보세요.
<!DOCTYPE html> <html lang="en"> <head> <style> div#a {background-color: green;} #a {background-color: yellow;} div[id=a] {background-color: blue;} </style> </head> <body> <div id="a">This is a div.</div> </body> </html>
상기 예제에서, CSS의 첫 번째 규칙이 나머지 두 개의 규칙보다 더 구체적이어서 적용됩니다.
컨텍스추얼 셀렉터(Contextual selectors)는 단일 요소 셀렉터보다 더 구체적입니다.
html 파일 내부에 작성된 스타일시트가 해당 요소에 더 가까이 있어,
해당 요소는 내장된 스타일시트에 따라서 스타일이 적용됩니다.
From external CSS file: #content h1 {background-color: red;} In HTML file: <style> #content h1 { background-color: yellow; } </style>
상기 예제에서는 HTML 내부의 CSS가 적용됩니다.
클래스 셀렉터는 어떤 요소 셀렉터도 능가합니다
.intro와 같은 클래스 셀렉터는 h1, p, div 등을 능가합니다.
<!DOCTYPE html> <html> <head> <style> .intro {background-color: yellow;} h1 {background-color: red;} </style> </head> <body> <h1 class="intro">This is a heading</h1> </body> </html>
전역 셀렉터(universal selector)와 상속된 값의 명시도는 0 입니다
- *, body * 및 유사 항목의 명시도는 0입니다. 상속된 값의 명시성도 0입니다.