(CSS) CSS 우선순위

CSS 우선순위

CSS의 우선순위에 대해 공부해보자.

우선순위라니?

웹페이지를 로딩하면 브라우저는 HTML과 CSS를 파싱한 후 렌더링 과정을 거쳐 유저에게 보여준다. CSS 코드 내에는 서로 충돌하는 속성들이 존재할 수 있다. 이때 브라우저는 CSS를 파싱하는 과정에서 웹페이지의 CSS 내에 겹치는 속성들에 대해 우선순위를 매겨 어떤 속성값을 적용할지 선정한다.

브라우저가 어떤 방식으로 우선순위를 매기는지 알아야 원하는 결과가 출력되도록 CSS 코드를 작성할 수 있다.

우선순위

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

!important
Inline styles
ID
class
Elements
순서 (가장 뒤에 선언된 값이 적용됨)

예제

예제를 보며 살펴보자.

.button {
    background-color: red !important;
}

.button #nav {
    background-color: blue;
}

css_priority_1

!important 값이 부여된 속성값은 최우선적으로 적용된다. 그러므로 배경색이 red이 되었다.

.button {
    background-color: red;
}

.button ,div{
    background-color: blue;
}

css_priority_3

.button 클래스가 공통으로 존재하지만 아래 선언부에 div 엘리먼트가 있으므로 배경색이 blue가 된다.

.button {
    background-color: red;
}

.button ,div{
    background-color: blue;
}

#nav {
  	background-color: purple;
}

css_priority_2

ID의 우선순위가 가장 높으므로 배경색이 purple이 된다.