CSS 우선순위 규칙

웹사이트 제작하다보면 하나의 태그에 여러 가지의 CSS가 적용될 때가 있다.

이 때 특정한 규칙에 따라 CSS에 우선 순위가 부여되어 적용된다.

 

CSS 우선순위

1. 기본적으로 뒤에 나오는 CSS일수록 우선순위가 높다.

 

2. !important > inline style attribute > id > class, 다른 attribute, 수도클래스(:first-child같은 것) > tag element, 수도엘리먼트(::before같은 것) 순으로 우선순위가 높다.

 

3. 우선순위가 같다면 개수가 많은 css가 우선순위가 높다.

 

4. !important와 inline style attribute은 실무에서 사용을 제한하는 경우가 많다.

!important는 css 값 뒤에 붙여진 키워드를 의미하고, 인라인 스타일 속성은 태그에 주어진 style 속성 내용을 가리킨다. 따라서 이 두 가지는 최후의 수단이고 이 외의 id, class, tag를 중점적으로 보면 된다.

 

5. css 우선순위 계산 방식은 올림픽의 금은동 메달이라고 가정해보자.

(id가 금메달, class같은 기타 속성이 은메달, 태그 이름이 동메달)

 

올림픽에서는 금메달 1개가 은메달 100개보다 우선순위가 높다.

id 선택자에 css가 붙어있으면 class 여러 개에 css가 붙어있어도 id 선택자가 먼저 적용된다.

6. 우선순위가 같다면 개수로 순위가 정해진다(메달 개수)

class 하나에 달린 css보다 class 두 개에 달린 css 우선 순위가 더 높다.

7. 개수마저 같다면 뒤에 나오는 것이 순위가 높다. CSS 이름 자체가 Cascading Style Sheet이다. 이름대로 뒤에 나오는 CSS가 앞에 나오는 CSS를 덮어씌운다.

 

예제

See the Pen css5-1 by Hyunyoung Cho (@zerocho) on CodePen.

 

1번째 규칙대로라면 가장 마지막에 나오는 div 태그가 적용된다.

하지만 div는 동메달이기 때문에 더 우선순위가 높은 것들이 있는지 찾아보아야 한다.

이제 2번 규칙에서 본 !important와 인라인css가 있는지 찾아본다.

text-decoration: line-through !important; 규칙이 !important로 되어 있고, background: yellow;가 인라인 css로 되어 있으니 이 둘은 다른 무엇보다 먼저 적용된다.
  
이제 id를 찾아보면 #i에 붙은 css가 적용되는데 이때 display 속성이 두 개가 있다.

이럴 때는 나중에 나온 display: inline-block;이 우선 순위를 가진다. background 속성은 인라인 css가 우선 순위를 가지기 때문에 적용되지 않는다.

그 다음은 class 등의 속성을 보면 class뿐만 아니라 name 속성도 css가 적용되어 있다.

이때는 뒤에 나온 [name=d]가 우선순위를 가지지만, 주의하셔야 할 점이 .a.b가 은메달이 두 개다.

따라서 얘네의 color: blue;가 우선순위를 가진다. 이제 남은 것은 [name=d]의 font-style: italic;이다.

css 우선 순위를 파악하여 기존의 css를 덮어씌울 수 있다.

css간 충돌이 발생한다면 위의 내용을 토대로 우선순위를 잡아갈 수 있다.

 

www.zerocho.com/category/CSS/post/588cb95ca63e64132496a5d5