CSS 선택자 우선순

박종호·2024년 1월 8일

CSS frontend

FrontEnd

목록 보기

6/17

들어가며

CSS 언어에는 충돌 시 어떤 규칙이 우선하는지 규칙이 있습니다.
이러한 규칙을 계단식(Cascade) 및 우선 순위(Specificity)라고 합니다.

후자 우선의 원칙 뒤에 나오는 CSS가 우선순위가 높습니다
구체성(명시도)의 원칙
중요성의 원칙

🔴 후자우선의 원칙

동일한 선택자에 동일한 속성이 사용되었을 경우 뒤에 적힌 속성을 따르게 됩니다.

🟠 구체성의 원칙(Specificity: 명시도)

어떤 선택자가 더 구체적인가?

-이러면 body p가 더 구체적으로 명시되어있기 때문에 색상은 초록색으로 나오게된다.

가중치

inline 스타일 속성
id #
class ., 가상 클래스, 속성선택자
type(tag), 가상 요소 선택자

위와 순서대로 가중치가 높습니다.

우선 순위 계산

inline-style	1000점
id 선택자 #	100점
class ., 가상클래스, 속성선택자	10점
타입, 가상요소 선택자	1점
전체선택자 *	0점

[퀴즈] 글자의 색상을 생각해보세요!

<div>
  <p id="id" class="class">
		1. 이 글자는 어떤 색일까요?
	</p>
  <p id="id" class="class" style="color:red">
		2. 이 글자는 어떤 색일까요??
	</p>
</div>

div #id{
  color:green;
}
p{
  color:black;
}
#id{
  color:blue;
}
.class{
  color:yellow;
}

정답
1. 초록색
  - #id, .class 단독으로쓰인것보다 유형선택자와 아이디 선택자 가 함께 쓰인 div #id처럼 더 구체적으로 작성된 선택자의 속성이 적용됩니다.
2. 빨간색
  - inline-style 의 속성이 우선으로 적용됩니다.

[퀴즈] 글자와 배경 색상을 생각해보세요!

<!DOCTYPE html>
<html lang="ko-KR">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>선택자 우선순위 점수</title>
</head>
<body>
    <main>
		  <section>
		    <article>
		      <div>
		        <ul class="ul">
		          <li>
		            <p>
		              <strong>
										<span>
	                    <a href="#" class="click">
	                      1. 이 글자는 어떤 색일까요?
	                      2. 배경색은 어떤 색일까요?
	                    </a>
	                  </span>
		              </strong>
		            </p>
		          </li>
		        </ul>
		      </div>
		    </article>
		  </section>
		</main>
</body>
</html>

/* 클래스 + 유형 선택자 */
.ul a {
  color: yellow;
}

/* 클래스 선택자 */
.click {
  color: green;
  background: black;
}

/* 유형 선택자 */
html body main section article div ul li p strong span a {
  background: purple;
  color: blue;
}

정답
1. 노란색
2. 검은색
  🤔 클래스 + 유형은 11점이고, 클래스는 10점이고, 타입 선택자 12점이니, 1번의 답은 파란색, 2번의 답은 보라색이어야하는거 아닌가요?
  아무리 구체적으로 작성하였다 하더라도!
  가중치의 점수가 클래스선택자 > 유형 선택자 가중치 법칙을 이 길수는 없습니다!

[추천사이트: 명시도 계산기 사이트]

Specificity Calculator