[HTML/CSS] 스타일 우선 적용 순서 - cascading과 specificity

CSS는 'Cascading Style Sheet'라는 이름에서부터 알 수 있듯이, cascading(폭포, 단계적으로 행하다.)이라는 특징을 가지고 있다. 'cascading이 뭐야?'라고 묻는다면 '단계적으로 스타일이 적용된다', 즉, '하나의 대상에 여러 가지의 스타일이 중복 적용된다'는 것을 의미한다. 

 

그렇다면, 하나의 태그에 여러개의 충돌되는 스타일이 지정되어 있다면, 태그는 어떤 스타일을 따르게 될까?

(예를 들어 어디에서는 p 태그의 font-size=20px, color: #FFFFFF;(흰색)이고, 다른 곳에서는 font-size: 10px; color: #000000;(검정색) 라고 지정해놓았음) 

 

결론은 첫째, 개별성(specificity)이 높은 스타일을 적용하며, 둘째, 개별성이 같다면 가장 마지막에 선언한 스타일을 적용한다. 

 

1. 더 구체하게 대상을 명시한 쪽의 스타일이 적용된다.

  (Specificity 높을수록 스타일 적용 우선순위 높다.) 

 - 일종의 '점수제도'가 있어서 점수가 높은 쪽에서 지정한 스타일을 따른다고 생각하면 쉽다.

 - CSS에서 스타일을 적용할 대상을 구체적으로(specific하게) 쓸 수록 더 높은 우선순위를 가지게 되어 그 스타일이 적용된다. 

 

선택자	사용 예	개별성
inline 선택자	style="color: red;"	1000
id 선택자	#gnb	100
class 선택자 속성 선택자  가상 class	.wrap [type="radio"] :hover, :focus, :link, :visited	10
type 선택자 가상요소	p, h1, div, span  ::before, ::after	1

 - 굳이 점수 체계를 외울 필요 없이, 상식적으로 생각하면 쉽게 이해할 수 있다.

 - 예컨대, HTML에서 <p style="color: red;">test</p>라고 했다면, 이 p 태그는 매우 구체적으로 (매우 specific하게) 스타일이 적용되어 있으므로 왠만하면 이 스타일을 따를 것이다.

 - id는 한 번만 사용할 수 있으므로 구체적이지만, HTML에서 스타일을 적용할 대상을 직접 지정하는 inline 방식보다는 우선순위가 낮을 것이다.

 - 또한, class는 여러개의 태그를 지정할 수 있으므로 id 보다 덜 구체적이니까 더 우선순위가 낮을 것이다.

 - 마찬가지로 type 선택자는 HTML 문서에 수많은 타입선택자(ex. p 태그)가 있을 수 있으므로 매우 안 구체적이고, 따라서 우선순위가 낮을 것이다. 

 

※ 타입 선택자: HTML 요소(Element)를 선택하는 선택자

※ 가상 calss는 앞에 콜론(:)을 하나 가진다. (ex. :hover)

   반면, 가상 요소는 앞에 콜론을 두 개 가진다. (ex. ::before)

   하지만 대부분의 경우 가상 요소에 콜론을 하나만 붙여도 브라우저에서 인식한다. (ex. :before 도 인식함) 

 

예시) 

<-- HTML -->
<h1 style="color: red;" id="a" class="b">안녕하세요.</h1>
<h2 id="aa" class="bb">반갑습니다.</h2>
<h3 class="ccc">오늘 날씨가 좋네요.</h3>

/* CSS */

/* h1에 적용되는 스타일의 우선순위*/ 
/* inline 선택자가 1등 ==> 빨간색 */
#a{color: orange;}
.b{color: yellow;}
h1{color: green;}

/* h2에 적용되는 스타일의 우선순위*/
/* id가 1등 ==> 파랑색 */
#aa{color: blue;}
.bb{color: violet;}
h2{color: pink;}

/* h3에 적용되는 스타일의 우선순위*/
/* class가 1등 ==> 하늘색 */
.ccc{color: lightblue; }
h3{color: lightgreen;}

결과) 

 

2. (1번 점수가 동일하다면) 마지막에 선언한 스타일이 더 우선시된다. 

 - 위의 채점체계에 따라 똑같은 점수를 받았다면, 마지막에 선언한 스타일이 반영된다. 

예시) 

<!-- HTML -->
<h1 class="cc dd ee">Hello, world!</h1>

/* CSS */

/* specificity가 셋 모두 동일하므로, 
가장 마지막에 선언된 orange 컬러에 취소선 스타일이 적용된다. */
.cc{color: green; text-decoration: underline;}
.dd{color: blue; text-decoration: none;}
.ee{color: orange; text-decoration: line-through;}

결과)

 

3. 기타 참고 자료

 - MDN, 

    https://developer.mozilla.org/ko/docs/Web/CSS/Specificity

 - W3School, CSS Specificity 

    https://www.w3schools.com/css/css_specificity.asp