[CSS] 적용 우선순위

[CSS] 적용 우선순위

 

 

한 요소에 대해 서로 중복되는 스타일이 충돌할 수 있다.

CSS에는 충돌하는 스타일 중 어떤 것을 적용할 것인지에 대한 우선순위가 존재한다.

 

1. !important

속성 값 뒤에 "!important"를 입력한다.

div {
	color: red !important;
}

 

이 코드 위나 아래나 어떠한 방식으로든 모든 <div>의 'color'를 다르게 설정해도 "red"로 적용된다.

"!important"는 모든 우선순위를 무시하고 반드시 적용되도록 만든다.

이러한 특성 때문에 오히려 거의 사용되지 않는다.

 

 

2. 인라인 스타일 (inline)

CSS가 아닌 HTML 태그 내에서 style을 적용하는 것이다.

(HTML의 <style> 태그를 뜻하는 것이 아니다.)

<div style="color:red;">나는 빨간색</div>

 

CSS 파일보다 HTML 파일에서 인라인으로 설정한 것이 우선적으로 적용된다.

이 방식은 "!important"와 마찬가지로 사용을 지양하고 있다.

 

 

3. 아이디 (id)

선택자로 id를 사용한 경우이다.

#red_div {
	color: red;
}

 

일반적으로 사용하지 않는 위의 두 가지 방법을 제외하면 id를 통한 선언이 가장 우선적으로 적용된다.

 

 

4. 클래스 (class)

선택자로 class를 사용한 경우이다.

.red_div {
	color: red;
}

 

id 다음의 우선순위를 가진다.

하나의 태그는 여러 class를 가질 수 있지만 id는 하나 밖에 가질 수 없다는 점을 생각하면 id가 class보다 우선순위가 높다는 것을 짐작할 수 있다.

 

 

5.  태그 (tag)

선택자로 tag를 그대로 사용한 경우이다.

div {
	color: red;
}

 

아무래도 class나 id로 선언하는 것보다는 낮은 아이덴티티(identity)를 가진다.

속성을 부여한 경우 중 가장 낮은 우선순위를 가진다.

 

 

---

번외

 

상속 (inherit)

속성이 설정되지 않은 경우에 상위 요소의 속성이 적용된다.

.red_div {
	color: red;
}

<div class="red_div">
	나는 빨간색
	<div>나도 빨간색</div>
</div>

 

 

* (전체 선택자)

선택자로 *을 선택한 경우이다.

* {
	color: red;
}

 

모든 요소에 적용되지만 다른 모든 선언이 우선적으로 적용된다.

 

 

코드 내 위치

선언에 따른 우선순위가 동일한 경우이다.

코드 내에서 아래에 위치한 명령이 적용된다.

<div class="a">
	<div class="b">나는 무슨 색</div>
</div>

.a div.b {
	color: red;
}

div.a .b {
	color: blue;
}

 

두 선언 모두 class 두 번, tag 한 번으로 그 우선순위가 같다.

따라서 늦게 선언된 "blue"가 적용된다.

 

<link rel="stylesheet" href="style1.css">
<link rel="stylesheet" href="style2.css">

 

두 개의 CSS 파일에서 동일한 요소의 속성에 대한 선언이 있다면 HTML 코드 상에서 아래에 위치한 "style2.css"가 더 높은 우선순위를 가진다.