CSS 코스

적용 우선순위

개요

CSS의 특성상 어떤 태그에 속성이 중복되어 설정될 수 있는데요,
CSS는 어떤 속성이 우선되어 적용되는지 미리 명시하고 있습니다.

우선순위는 아래와 같습니다.

  1. 속성 값 뒤에 !important 를 붙인 속성
  2. HTML에서 style을 직접 지정한 속성
  3. #id 로 지정한 속성
  4. .클래스, :추상클래스 로 지정한 속성
  5. 태그이름 으로 지정한 속성
  6. 상위 객체에 의해 상속된 속성

같은 우선 순위에 있는 경우, 부모-자식 관계가 많은 경우가 우선되며, 모든 설정이 같은 경우 나중에 선언한 것이 우선되어 적용됩니다.

!important

우선순위를 무시하고, 꼭 적용 시키고 싶은 속성이 있다면, 속성 값 뒤에 !important 를 붙여서 적용시켜주면 됩니다.

.normal { color: blue }
.compulsion{ color: black !important }

!important 는 우선순위 뿐만 아니라 디자이너-개발자간 커뮤니케이션시 중요한 속성임을 알리는 뜻을 나타내기도 합니다.

예제

<html>
<head>
<style>
	#my-box .text{ color: black }
	.black{ color: red }
	.important-black{ color: red !important }
</style>
</head>
<body>
	<div id="my-box">
		<div class="text">My text 1</div>
		<div class="text black">My text 2</div>
		<div class="text important-black">My text 3</div>
	</div>
</body>
</html>