css 우선순위 정리

CSS(Cascading Style Sheets)에서 스타일 규칙의 우선순위는 선택자의 구체성과 충돌 해결 규칙에 따라 결정됩니다. 스타일 규칙 간에 충돌이 발생할 때 어떤 스타일이 우선되는지를 결정하는 규칙이 있습니다.

 

 

1. 중요도 (Importance): !important 키워드가 지정된 스타일은 다른 모든 규칙보다 우선합니다. 그러나 !important는 되도록 사용을 피하고 유지보수를 어렵게 만들 수 있으므로 신중하게 사용해야 합니다.

2. 인라인 스타일 (Inline Styles): HTML 요소의 style 속성에 직접 지정된 스타일은 다른 모든 스타일 규칙보다 우선합니다.

3. ID 선택자 (ID Selectors): #을 이용하여 지정된 ID 선택자에 의해 스타일링된 규칙은 클래스 선택자나 태그 선택자보다 우선됩니다. 그러나 같은 ID가 여러 개 사용되는 경우에는 CSS의 유효성을 위해 고유해야 합니다.

4. 클래스 선택자 및 속성 선택자 (Class Selectors & Attribute Selectors): 클래스 선택자와 속성 선택자는 태그 선택자보다 더 구체적인 스타일링을 제공합니다.

5. 태그 선택자 (Tag Selectors): HTML 요소의 태그 이름에 의해 스타일링된 규칙은 보다 구체적인 선택자에 의해 스타일링된 규칙보다 우선됩니다.

6. 가상 클래스 및 가상 요소 선택자 (Pseudo-classes & Pseudo-elements): :hover, :active, ::before, ::after 등의 가상 클래스 및 가상 요소 선택자는 다른 선택자보다 우선합니다.

7. 상위 요소와 관계 선택자 (Parent/Descendant Selectors): 특정 요소의 하위 요소에 스타일을 적용하는 선택자도 우선 순위에 영향을 미칩니다.

8. 캐스캐이딩 (Cascading): 스타일 규칙이 위에서 아래로 순서대로 적용되며, 나중에 나오는 규칙은 이전에 나온 규칙을 덮어쓸 수 있습니다.

9. 상속 (Inheritance): 일부 스타일 속성은 상위 요소로부터 하위 요소로 상속됩니다. 이러한 속성은 부모 요소의 스타일을 따르며, 상속되는 속성은 해당 속성을 명시적으로 지정하지 않으면 부모 요소의 스타일이 사용됩니다.

 

 

우선순위는 위에서 아래로 순서대로 확인되며, 더 구체적인 선택자 및 스타일이 더 높은 우선순위를 갖습니다. 같은 수준의 우선순위인 경우, 나중에 나온 스타일 규칙이 이전의 규칙을 덮어쓸 수 있습니다. 따라서 스타일링을 할 때는 선택자의 구체성을 고려하고, 필요하다면 !important를 사용하기보다는 구체성을 조절하여 스타일을 관리하는 것이 좋습니다.

 

 

우선순위가 같은 경우에도 스타일 규칙 간의 충돌을 해결하기 위해 특정도값(Specificity)을 계산하여 어떤 스타일 규칙이 더 우선되는지 결정할 수 있습니다. 특정도값은 선택자의 구체성을 나타내며, 선택자에 적용된 ID, 클래스, 태그 등의 요소 개수를 기반으로 계산됩니다.

 

id	class, [attr], :class	type, ::element
0	0	0

 

a	0, 0, 1 ➡️ 001
.a	0, 1, 0 ➡️ 010
#a	1, 0, 0 ➡️ 100
#a a	1, 0, 1 ➡️ 101
#a.a a	1, 1, 1 ➡️ 111
#a#b[href]::before	2, 1, 1 ➡️ 211

 

 

➡️ 참고한 사이트

https://www.w3.org/TR/selectors/#specificity-rules

 

➡️ CSS선택자를 입력하면 특정도 값을 알려주는 사이트

https://specificity.keegan.st/

 

➡️ 사이트의 스타일시트에 대한 분석 및 시각화를 제공 하는 사이트

cssstats.com