선택자 우선순위
선택자 우선순위
CSS에 적용 우선 순위가 있습니다. 파일 안에서도 순위가 있기 때문에 3가지 원칙이 있습니다.
1. 후자의 원칙
2. 구체성의 원칙
3. 중요성의 원칙
1 후자 우선의 원칙
동일한 선택자가 연속으로 사용되었을 경우 후자가 우선
2 구체성의 원칙
Specificity는 특이성, 명시도 혹은 구체성으로 표기하기도 합니다. 한 선택자가 다른 선택자보다 더 구체적으로 작성되었다면 구체적인 선택자가 우선합니다. 아래 코드에서 선택자는 둘 다 같은 p 태그를 가르키고 있습니다. 하지만 첫 번째 선택자가 두 번째 보다 더 구체적이기 때문에 첫 번째 선택자의 스타일이 적용됩니다.
<head>
<style>
p.color-red {
color: red;
font-size: 20px;
}
p {
color: green;
}
</style>
</head>
<body>
<p class="color-red">
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Praesentium, dolor repudiandae tempora consequatur
maxime animi ad! Quibusdam beatae laudantium itaque eos, cupiditate vero reiciendis assumenda natus
reprehenderit eveniet at enim?
</p>
</body>2-1 가중치
구체성의 원칙은 가중치라는 것을 기준으로 작동합니다. 즉, 어떤 선택자가 더 구체적인가?를 판단할 때 가중치를 기준으로 판단합니다
id와 class가 동시에 있을 경우 id > class > 타입 순으로 style 적용 됩니다. id의 가중치가 가장 높으며, 그 다음이 class, 마지막이 타입의 가중치 순 입니다.
2-2 우선 순위 계산
선택자들은 각각 해당하는 가중치 점수가 있습니다.
inline-style : 1000점
id 선택자 : 100점
class, 가상클래스, 속성선택자 : 10점
타입, 가상요소 선택자 : 1점
전체 선택자 (*)
- inline-style : 요소의 안에 속성으로 선언되는 스타일 입니다. 1000점의 가중치를 가집니다.
- id 선택자 : 100점의 가중치를 가집니다.
- class, 가상클래스, 속성 선택자 : 10점의 가중치를 가집니다.
- 타입, 가상요소 선택자 : 1점의 가중치를 가집니다.
- 전체 선택자는 무시됩니다.
재미있는 것은 타입 셀렉터를 이용하여 태그로 13점의 점수를 얻어도, 클래스가 가지는 10점을 넘지 못합니다. 따라서 클래스 하나보다 중요도가 낮습니다. 금은동 메달처럼 아무리 동매달이 많아도 은메달을 넘기지 못합니다.
3. 중요성의 원칙
다른 속성보다 더 우선적으로 적용되어야할 중요한 스타일 속성이 있다면 !important를 속성값 다음에 추가합니다.
- !important : 절대적인 우선순위. 가중치 점수를 무시하고 무조건적인 우선 순위를 가집니다. 쉬운 방법이지만 우선 순위 계산을 어렵게 만들기 때문에 인라인 스타일을 덮어 써야하는 등의 불가피한 상황이 아니라면 사용하지 않는 것이 좋습니다.
하지만 실무에서는...?
에어비앤비에 도배되어있는 무수히 많은 임포턴트들...
많은 대규모 웹 사이트 및 앱에서 CSS의 문제는 우선순위를 유지하는 것이 너무 어려워 어느 시점에서 추가 !important 를 피하기 어렵습니다. 그리고 스타일을 섯불리 제거하거나 수정하면 다른 구성 요소가 손상될 수 있으므로 important를 사용합니다.
