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

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

 

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

 

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

 

1. CSS 강제 적용

p {
  color: #FFF
}

.example {
  color: #000 !important
}

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

 

 

2. not 선택자

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

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