[CSS] CSS 선택자(selector) 우선순위

CSS 선택자(selector) 우선순위

CSS 선택자 우선순위는 스타일 규칙이 적용될 때 어떤 규칙이 우선적으로 적용되는지를 결정합니다.

---

기준은 다음과 같습니다.

1. 점수가 높은 선언이 우선합니다.
2. 점수가 같으면, 가장 마지막에 작성된 선언이 우선합니다.
3. 점수는 비유가 아닌 진짜 점수입니다.

선택자 점수 매기기

!important  :  무한 ♾️

div {
	color: red !important;
}

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

 

인라인 선언 : 1000점

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

인라인 작성 방식은 html 문서 내부에서 style 속성에 직접 스타일을 작성합니다.

우선순위가 너무 높기 때문에 CSS에서 !important를 써주지 않는 이상 다른 스타일을 덮을 수 없게 됩니다.

 

id 선택자 : 100점

#name {
	color: red;
}

 

class 선택자 : 10점

.name {
	color: red;
}

 

태그 선택자 : 1점

p {
	color: red;
}

 

전체 선택자 : 0점

* {
	color: red;
}

 

부정 선택자 : 0점

:not(p) {
	color: red;
}

 

 

---

정리!

CSS 선택자 우선순위를 알아보았고 실제 테스트를 통하여 연습하시길 바랍니다.

다음 CSS 반응형디자인 주제를 가지고 돌아오겠습니다. 개굴!

---

 

참고 사이트!

https://iridescent-zeal.tistory.com/90

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

https://velog.io/@ewaterbin/02.-CSS-Selector

02. CSS - 선택자와 우선순위