[CSS]선택자 우선순위: 점수 매기기

Front-end/HTML & CSS

영벨롭 2022. 3. 29. 13:29

선택자 우선순위란 같은 요소가 여러 선언의 대상이 된 경우, 어떤 선언의 CSS 속성을 우선적으로 적용할 것인지를 결정하는 방법입니다.

그 기준은 다음과 같습니다.

1. 점수가 높은 선언이 우선함

2. 점수가 같으면, 가장 마지막에 해석된(작성된) 선언이 우선함

!important 를 속성 값 옆에 작성하시면 우선순위가 가장 높게 부여됩니다.

div {
	color: red !important;
}

인라인 선언 방식은 html 문서 내부에서 style 속성에 직접 스타일을 작성하는 방식인데요.

인라인 방식으로 작성하게되면 우선순위가 너무 높기 때문에 css에서 !important를 써주지 않는 이상 다른 스타일을 덮을 수 없게 됩니다.

<div>
	<p style="color: red;">Contents</p>
</div>

#name {
	color: red;
}

.name {
	color: red;
}

p {
	color: red;
}

* {
	color: red;
}

:not(p) {
	color: red;
}

이 선택자는 list 클래스의 하위 요소인 li중 클래스 이름이 item인 요소를 가리킵니다.

점수는 클래스 + 태그 + 클래스 = 10 + 1 + 10 = 21 점입니다.

이 선택자는 list 클래스의 하위 요소인 li에 가상 클래스 hover를 부여한 요소를 가리킵니다.

이때 가상 클래스 hover도 클래스와 동일한 점수를 가집니다.

점수는 클래스 + 태그 + 클래스 = 10 + 1 + 10 = 21 점입니다.

이 선택자는 box 클래스에 가상 요소 before를 가리킵니다.

일반적으로 요소는 태그로 취급하여 태그와 동일한 점수를 가집니다.

점수는 클래스 + 태그 = 10 + 1 = 11 점입니다.

이 선택자는 id가 submit인 요소의 하위 요소 중 span 태그를 가리킵니다.

점수는 id + 태그 = 100 + 1 = 101 점입니다.

이 선택자는 header 태그의 하위 요소이면서, menu 클래스의 하위 요소 중 li 태그의 가상 클래스 nth-child를 가리킵니다.

nth-child 역시 가상 클래스이기 때문에 클래스와 동일한 점수를 가집니다.

점수는 태그 + 클래스 + 태그 + 클래스 = 1 + 10 + 1 + 10 = 22 점입니다.

부정 선택자는 점수로 계산하지 않습니다. 즉, 0점이라고 계산해도 무방합니다.

점수는 부정 + 클래스 = 0 + 10 = 10 점입니다.

<!-- html -->
<body>
	<div class="hello">Hello</div>
</body>

(1) 점수가 같을 때 나중에 해석된(작성된) 스타일 적용

.hello { /*10점*/
  color: green;
}

.hello { /*10점*/
  color: red;
}

(2) 점수가 높은 선택자 스타일 적용

div.hello { /*11점*/
  color: green;
}

.hello { /*10점*/
  color: red;
}