[CSS] CSS Specificity : 명시도

스타일 계산하기 퀴즈 정답

• 같은 선택자라도 코드가 아랫줄에 있을수록 캐스케이딩 우선순위가 높다.
• 웹 브라우저 기본 스타일시트보다 사이트에서 제공하는 스타일시트가 우선순위가 높다.
• 명시도 점수가 높을수록 캐스케이드 우선순위가 높다.
• 명시도는 아이디 개수, 클래스 개수, 요소 개수를 순서대로 숫자를 나열해서 점수를 매긴다.

선택자 우선순위

1. !important
2. 인라인 스타일
3. id 선택자
4. class 선택자, 속성 선택자([type="radio"]), 의사 클래스 선택자(:hover)
5. 유형 선택자(h1), 의사 요소(:before)
6. 부모 요소에 의해 상속된 속성

CSS 스타일 적용 우선순위

1. 인라인 스타일
2. 내부 적용 스타일 (<style></style>)
3. 외부 적용 스타일 (css 파일)

CSS Specificity : 명시도

Specificity is the algorithm used by browsers to determine the CSS declaration that is the most relevant to an element, which in turn, determines the property value to apply to the element. The specificity algorithm calculates the weight of a CSS selector to determine which rule from competing CSS declarations gets applied to an element.

명시도 계산 방식?

명시도는 주어진 CSS 선언에 적용되는 가중치(weight)로, 일치하는 선택자 내 각 선택자 유형의 수에 의해 결정됩니다. 여러 선언이 명시도가 같은 경우, CSS에서 맨 끝에 오는 선언이 요소에 적용됩니다. 명시도는 같은 요소가 여러 선언의 대상이 되는 경우에만 적용합니다. CSS 규칙에 따라 직접 대상 요소는 요소가 부모로부터 상속받는 규칙보다 항상 우선합니다.

• 명시도가 같으면 더 많이(구체적으로)작성된 선택자의 스타일이 적용된다.

• 상위 명시도를 하나 가지고 있으면 하위 명시도를 아무리 많이 가지고 있어도 상위 명시도를 가진 선택자의 스타일이 적용된다.

• (0,0,0) = (id 선택자, class 선택자, tag 선택자)

• id가 가장 높은 점수를 갖는다. id>class>tag 순.

• 명시도를 무시하고 스타일을 지정하고 싶을 때는 !important를 스타일 값 뒤에 작성하면 된다. but 훗날 디버깅을 어렵게 만들 수 있기 때문에 안티 패턴으로 취급된다.

명시도 계산기

https://specificity.keegan.st/