목차
- CSS 명시도 계산법
- CSS 명시도 계산기
- CSS 명시도 예제1 - 기본 예제
- CSS 명시도 예제2 - 명시도 같으면, 나중에 선언된 게 우선 적용
- CSS 명시도 예제3 - 클래스 추가해 명시도 높여 우선 적용시키기
- CSS 명시도 예제4 - 명시도 (같은 vs 다른) 경우
- CSS 명시도 예제5 - 아이디・클래스 우선순위
- CSS 명시도 시험보기
CSS 명시도 계산법
※ 명시도 (Specificity)
1.
CSS 선택자 표현 방법을 숫자 4자리로 표현 후, 숫자 큰 순으로 우선순위 결정.
(예) ○○○○
2.
각 자리의 숫자 결정법
- 천 자리 : inline (= 인라인) 스타일로 추가
- 백 자리 : # (= 아이디 = id) 선택자 개수
- 십 자리 : . (= 클래스 = class) 선택자 개수
- 일 자리 : 요소 (=태그 = 엘러먼트 element) 선택자 개수
3.
자손선택자 경우, 좀 더 직접적인 조상을 이용해 표현하더라도
명시도 동일 시, 나중 선언된 것이 적용됨. (아래 예제 2 참고)
※ 보통, 내부/외부스타일로 정의하므로 보통 백~일자리 숫자 크기순으로 결정.
CSS 명시도 계산기
https://specificity.keegan.st/
CSS 명시도 예제1 - 기본 예제
ul#primary-nav li.active
[계산]
- # (아이디) 개수 : 1개 = 1 (백자리)
- . (클래스) 개수 : 1개 = 1 (십자리)
- 요소 개수 : 2개 = 2 (일자리)
∴ 명시도 : 0112
CSS 명시도 예제2 - 명시도 같으면, 나중에 선언된 게 우선 적용
<style>
p > span {color:blue;} /* 명시도 : 0002 */
div span {color:red;} /* 명시도 : 0002 */
</style>
<div>
<p>
<span>홈짱닷컴 Homzzang.com</span>
</p>
</div>
결과보기
※ 직접 조상을 이용해 표현해도 마찬가지. ㅡㅡ;
<style>
div span {color:red;} /* 명시도: 0002 */
p > span {color:blue;} /* 명시도: 0002 */
</style>
<div>
<p>
<span>홈짱닷컴 Homzzang.com</span>
</p>
</div>
결과보기
CSS 명시도 예제3 - 클래스 추가해 명시도 높여 우선 적용시키기
<style>
p.hz > span {color:blue;} /* 명시도: 0012 */
div span {color:red;} /* 명시도: 0002 */
</style>
<div>
<p class='hz'>
<span>홈짱닷컴 Homzzang.com</span>
</p>
</div>
결과보기
CSS 명시도 예제4 - 명시도 (같은 vs 다른) 경우
[명시도가 같은 경우]
<style>
p.a {color:blue;}
p.b {color:red; font-weight:bold; text-decoration:underline;}
</style>
<p class=a> 홈짱닷컴 Homzzang.com</p>
<p class=b> 홈짱닷컴 Homzzang.com</p>
결과보기
[명시도가 다른 경우]
<style>
p.a {color:blue;} /* a 클래스 있는 p 경우 해당 속성에 한해 우선 적용 */
p {color:red; font-weight:bold; text-decoration:underline;} /* 모든 P 요소에 적용 */
</style>
<p class='a'> 홈짱닷컴 Homzzang.com</p>
<p> 홈짱닷컴 Homzzang.com</p>
결과보기
CSS 명시도 예제5 - 아이디・클래스 우선순위
<style>
p#hz {color:red;}
p.hz {color:blue}
</style>
<p id='hz' class='hz'>홈짱닷컴 Homzzang.com</p>
<p class='hz'>홈짱닷컴 Homzzang.com</p>
<p>홈짱닷컴 Homzzang.com</p>
결과보기
PS. 아이디/클래스 우선순위
CSS 명시도 시험보기
https://codepen.io/sinbi/pen/GaGVKa
