[CSS] CSS 선택자 우선순위

가장 기초적인 부분인데 그냥 넘어가는 경우가 많다.

선택자 우선순위

우선순위란, 같은 요소가 여러 선언의 대상이 될 경우, 어떤 선언의 CSS 속성을 우선 적용할지 결정하는 방법.

점수가 높은 선언이 우선
점수가 같으면 가장 마지막에 선언한 태그가 우선

<head>
<style>
div { color: red !important; }
#color_yellow { color: yellow; }
.color_green { color: green; }
div { color: blue; }
* { color: tomato; }
body { color: violet; }
</style>
</head>
<body>
<div id="color_yellow" class="color_green" style="color: orange;"> Hello world!</div>
</body>

점수로 우선순위를 나타내보자.

<head>
<style>
/* [1] !important :: 999999점 */
div { color: red !important; }

/* [3] ID :: 100점 */
#color_yellow { color: yellow; }

/* [4] Class :: 10점 */
.color_green { color: green; }

/* [5] 태그선택자 :: 1점 */
div { color: blue; }

/* [6] 전체선택자 :: 0점 */
* { color: tomato; }

/* [7] 상속 :: x */
body { color: violet; }
</style>
</head>
<body>
<!-- [2] 인라인선언 :: 1000점 -->
<div id="color_yellow" class="color_green" style="color: orange;">Hello world!</div>
</body>

!important > inline > ID > Class > 태그 > 전체 > body

body라는 태그에 속성을 적용하면 상속되기 때문에 점수를 계산하지 않는다.

[예제]

.list li.item {}
.list li:hover {}
.box::before {}
#submit span {}
header .menu li:nth-child(2) {}
h1 {}
:not(.box) {}
:not(p) {}

[예제 정답]

.list(10) + li(1) + .item(10) = 21
.list(10) + li(1) + :hover(10) = 21
.box(10) + ::before(1) = 11
#submit(100) + span(1) = 101
header(1) + .menu(10) + li(1) + :nth-child(2)(10) = 22
h1(1) = 1
:not()(0) + .box(10) = 10
:not()(0) + p(1) = 1

📌정리

2022.01.28 수정

header, footer, section 등 태그로 들어가므로 1점.
속성값 뒤의 !important
태그에 inline으로 style 속성 지정.
선택자 #id
선택자가 .class 및 :(pseudo)클래스
선택자 tag이름 및 가상요소(::)
!!예외!! 부정선택자 :not() 는 가상클래스선택자이지만 점수를 가지지 않고 ()안을 점수로 가진다.
참고사항 :: 와일드카드(*)는 0점이다.
그럼에도 코드를 짤 때 지양해야하는 이유는 전체 클래스가 적용될 수 있으므로 후에 유지보수할 때 일을 두번하게 된다.

인라인	`id`	`class`, `:(가상선택자)`	`tag`, `::`(가상클래스)
1000	100	10	1

Reference

한 페이지로 정리하는 CSS

CSS-우선순위

저작자표시 비영리 동일조건

'👩🏻‍💻STUDY > CSS' 카테고리의 다른 글

[CSS] flex-basis vs width 차이점 (0)	2021.12.27
[CSS] 웹폰트 참고 (0)	2021.10.26
[CSS] flex 반응형에 따라 박스 떨어뜨리기 (0)	2021.09.27
[CSS] viewport (vw, vh, vmin, vmax) 의미와 사용 (0)	2021.09.01
[CSS] font-size를 통한 rem사용방법과 유의할 점 (0)	2021.08.27

/* jmjmjm */

[CSS] CSS 선택자 우선순위

선택자 우선순위

📌정리

Reference

'👩🏻‍💻STUDY > CSS' 카테고리의 다른 글

티스토리툴바

[CSS] CSS 선택자 우선순위

선택자 우선순위

📌정리

Reference

'👩🏻‍💻STUDY > CSS' 카테고리의 다른 글

'👩🏻‍💻STUDY/CSS' Related Articles

티스토리툴바