CSS(SCSS) - 선택자의 우선순위

1) 우선순위란?

• 같은 요소가 여러 선언의 대상이 된 경우, 어떤 선언의 CSS(SCSS) 속성을 우선 적용할지 결정하는 방법을 말한다.

2) 명시도란?

• CSS의 우선순위의 점수를 계산하는 것을 말한다.

1. 점수가 높은 선언이 우선시 됨
2. 점수가 같으면 가장 마지막에 해석된 선언이 우선시 됨

사용 예1)
html

<div id="hello" class="hello">Hello World</div>

css

div {
font-size: 50px;
}
.hello {
color: red;
}
#hello {
color: blue;
}

-> id 속성이 class 속성보다 CSS 우선순위(명시도)가 높아 순서를 바꿔도 id 속성에 준 색상이 먼저 적용됨을 알수 있다.

사용 예2)

div {
font-size: 70px;
}
.hello {
color: red;
}
.hello {
color: green;
}

-> 원래 두번째 hello 클래스에 적용된 red가 먼저 적용되어야 하는데 맨 아래에 있는 hello 클래스에 적용된 green 색상이 적용되는 이유는 점수가 같아도 더 나중에 작성한 혹은 더 나중에 해석되는 코드가 우선시 적용되기 때문에 마지막에 있는 hello 클래스의 green 색상이 적용된다.

사용 예3)

div {
font-size: 50px;
}

div.hello {
color: green;
}

.hello {
color: red !important;
}

-> 현재 !important를 적용시켜 Hello World 색상이 red로 적용이 되었는데 이때 !important를 되도록이면 사용하지 않는것을 추천하는 이유는 명시도의 점수를 무한대로 끌어올리고 한번 붙이기 시작하면 다른 방식으로 스타일을 덮어써서 수정이 불가능한 상황이 생기기 때문에 되도록이면 사용하지 않는 것을 추천하는 이유이다