[CSS] CSS의 특이도 (Specificity)에 따른 우선순위 계산법

css는 cascading style sheet의 줄임말이다.
직역하자면 폭포처럼 쏟아져내리는 스타일 시트라는건데...
맨 아래로 내려가면서 스타일시트를 작성할 수록 우선순위는 높아진다.

바로 이 때, 우리를 은근히 성가시게 하는 것은 바로 css 우선순위이다!
이 우선순위는 특이도를 계산할 줄 알면 헷갈리는 것 없이 명료해진다.

CSS 우선순위는 다음과 같다.

inline > id 선택자 > class 선택자 > 태그 선택자

• inline 작성시 1,0,0,0
• id 선택자 0,1,0,0
• class 선택자 0,0,1,0
• 태그선택자 0,0,0,1

쉼표를 빼면 4자리 숫자가 나오는데, 이 숫자가 크면 클 수록 우선순위가 높아진다.

만약 다음과 같은 html 태그가 있다고 치자.

<div id="menu" class="topmenu">
  <ul class="items">
    <li><a><span>메뉴항목</span></a></li>
  </ul>
</div>

여기 있는 span 태그를 스타일링하기 위해서 다음과 같이 작성을 했을 때..

#menu span { color: red; }	/* 0,1,0,1 */
.topmenu li a > span { color: green; }	/* 0,0,1,3 */
div > ul.items li span { color: blue; }	/* 0,0,1,4 */

id와 결합한 선택자 방식이 우선순위가 101로 높기에 스타일링하기 유리하다.
하지만 id 보다는 class로 특이도를 10정도로 유지하고,
유지보수할 때 특이도를 높히기 위해 id를 간헐적으로 사용하는게 더 유리할 것 같다는 개인적인 생각이 든다.

출처 및 참고
https://blogpack.tistory.com/1021