css 변경 안됨 ( 명시도가 높은 규칙 재정의 하기)

만약 css를 분명히 정의를 했는데 변경이 안된다면 명시도가 높은 코드에 재정의가 제대로 되지 않아서 일 수도 있다.

 

명시도 높은 코드 재정의 방법

#someElement p {
  color: blue;
}

p.awesome {
  color: red;
}

예를 들어 위의 코드를 실행해 보면 #someElement 안에 있는 p.awesome 태그라면 빨간색 color 값은 실행되지 않는다.

id + 태그 조합의 위 쪽 코드가 명시도가 더 높기 때문이다.

이럴 경우 #someElement 안에 있더라도 p.awsome의 css를 재정의 할 방법은 없을까?

 

 

명시도가 높은 규칙 재정의 하기

 

1) !important 사용하기

p.awesome {
  color: red !important;
}

!important를 사용하면 모든 명시도는 무시되고 가장 우선하게 된다. 그러나 !important를 남발할 경우 디버깅이 어려워질 수 있기 때문에 사용을 자제하는 것이 좋다.

 

 

2) 기존 id선택자를 속성 선택자로 변경하기

[id="someElement"] p { // 속성 선택자로 변경
  color: blue;
}

p.awesome {
  color: red;
}

id를 속성 선택자로 변경 할 경우 명시도 계산법에 따라 속성 선택자는 class 1개와 명시도 같아진다.

즉 아래 코드인 p.awesome와 명시도가 같아지기 때문에 명시도가 같을 경우 나중에 온 p.awesome 코드가 적용되게 된다.

 

 

 

 

css 명시도란? 명시도 계산방법은 아래의 포스팅 확인하기

 

https://moo-you.tistory.com/558

css 명시도란? + 명시도(Specificity) 계산하기

 

 

 

 

참고 : https://developer.mozilla.org/ko/docs/Web/CSS/Specificity