CSS Specificity

What is Specificity?

If there are two or more conflicting CSS rules that point to the same element, the browser follows some rules to determine which one is most specific and therefore wins out.

 

Think of specificity as a score/rank that determines which style declarations are ultimately applied to an element.

                                             

The universal selector (*) has low specificity, while ID selectors are highly specific! 

 

무엇이 특별한가?

하나의 같은 요소를 접근하는 css 규칙이 두개거나, 그 이상인 경우, 브라우저는 그것들중 하나가 가장 구체적인것을 결정하기 위해서 조금의 규칙을 따른다.

어떤 스타일 문서가 궁국적으로 요소에 적용되는지, 결정하는 구체성을 생각하여라?

* 셀렉터는 낮은 특별함을 갖고있지만, id 셀렉터는 높은 특별함을 가지고 있다?

 

 

Note: Specificity is a common reason why your CSS-rules don't apply to some elements, although you think they should.

 

특별함은 너의 css 규칙이 어떤 요소에 적용되지 않는지에 대한 일반적인 이유이다, 비록 너가 그들에게 그렇게 한다고 생각하지만, 

 

 

Specificity Hierarchy

Every selector has its place in the specificity hierarchy. There are four categories which define the specificity level of a selector:

Inline styles - An inline style is attached directly to the element to be styled. Example: <h1 style="color: #ffffff;">.

IDs - An ID is a unique identifier for the page elements, such as #navbar.

Classes, attributes and pseudo-classes - This category includes .classes, [attributes] and pseudo-classes such as :hover, :focus etc.

Elements and pseudo-elements - This category includes element names and pseudo-elements, such as h1, div, :before and :after.

 

Specificity 우선순위

 

모든 셀렉터는 특수 계층성안에서 그들의 위치를 가진다. 어떤 카테고리가 셀렉터의 레벨을 정의하는지에 대해서 4가지 카테고리가 있다?

 

인라인 스타일은 요소에 곧바로 적용된다. 스타일이 되어지려고?

id는 한페이지에서 독특한 값이다.

클래스 속석 수도클래스, 이 카테고리는 .classes를 포함하고, 수도 클래스 같은 것을 포함한다.

요소 그리고 수도 요소, 이 카테고리는 요소의 이름과 수도 요소 같은 것을 포함한다.

 

How to Calculate Specificity?

Memorize how to calculate specificity!

Start at 0, add 1000 for style attribute, add 100 for each ID, add 10 for each attribute, class or pseudo-class, add 1 for each element name or pseudo-element.

Consider these three code fragments:

 

어떻게 specificity 를 계산하는가?

어떻게 specificity를 계산하는지 암기하라

0부터 시작하고, 속성 스타일은 1000점을 더하고, 각각의 id에는 100점을 각각의 속성, 클래스, 스도 클래스는 10점을 더하고, 각각의 요소의 이름과 수도 엘리멘트는 1점을 더하라

이 3개코드의 파편을 고려하여라?

 

Specificity Rules

Equal specificity: the latest rule counts - If the same rule is written twice into the external style sheet, then the lower rule in the style sheet is closer to the element to be styled, and therefore will be applied:

 

만일 같은 규칙이 외부 스타일시트로 2번 쓰여졌다면, 스타일 시트안의 낮은 규칙이 요소에 가깝다?  그러므로 적용될것이다?