[CSS] 스타일 강제 적용 및 적용 예외

 

CSS를 다루다보면 하위 태그에서 일부 CSS가 적용이 안되기를 바라거나 특정 속성만 덮어쓰기를 하고 싶을 때가 있다.

하위 속성에서 특정 속성을 덮어쓰기 하고 싶다면 !important로 강제 적용을 해주고

하위 속성에 CSS를 물려주기 싫다면 not 선택자로 예외처리해주자!

1. CSS 강제 적용

p {
  color: #black
}

.example {
  color: #white !important
}

p태그의 글자색을 black으로 지정했지만 example 클래스를 물려받은 곳은 글자색이 white일 것이다!

CSS를 사용하는 경우에 우선순위에 의하여 내가 적용한 폰트가 산발적으로 적용되는 경우가 있다.
이를 해결하기 위하여 강제로 전체 적용하는 방법을 알아보자

* {
  font-family: "Nanum Gothic" !important;
}

2. not 선택자

p:not(.example){
  color: #FFF
}

p태그의 글자색은 하얀색으로 지정했지만 example 클래스는 제외하고 하얀색으로 지정하는 것이다!