[CSS] 상속받은 상위 속성(style) 무효화(초기화) 하기

PS.
모든 상위속성을 무시하는 걸 원한다면 아래 링크의 라이브러리를 사용하기를 권장한다.
- 10+ Best CSS Reset Stylesheets





많은 상황에서 상속받은 CSS에 대하여
depth를 이용하거나 CSS우선순위를 이용하여 덮어쓰기(!?) 하여 해결이 가능한것 같다.


하지만 다른 style을 적용하지 않고 부모 엘리먼트의 style 상속을 받지 않아야 하는 경우가 발생하여 알아보니 :not(selector) 라는 기능이 있었다.
1004lucifer
엄밀히 말하면 상속을 초기화(reset) 한다기 보다..
부모 Element 에서 style 적용 시 특정 Element에 style이 적용되지 않도록 하는 기능이다.





예제

<div class="parent">
  <span>aaaaaa</span>< br/>
  <p>aaaaaa</p>< br/>
  <span>aaaaaa</span>< br/>
  <span>aaaaaa</span>
</div>

.parent :not(p) {
  color:red;
}

1004lucifer









아래와 같은 형식으로도 사용이 가능하니 의외로 활용성이 좀 있어 보인다.

- div :not(.home) {…}







- div *:not(p) em {…}







- input:not([type="text"]) {…}







- h2:not(.foo):not(.bar) {…}







- li:not(.pingback) .comment-content p:first-child:first-line {…}







- div:not(.home) h2 + p:first-letter {…}







- .post:not(.first-post) a:hover {…}





PS.
정보를 찾다보니 jQuery 도 :not() Selector 가 있다는걸 알았다.
https://api.jquery.com/not-selector/

무효, 리셋,


[혼잣말]
지금 알고있는걸 그때도 알았더라면..
상속받은 상위 속성을 무효화(무시) 할줄 몰라서 다시 style을 덮어쓰기 하며 힘들게 작업하던 스스로에게 안쓰러워진다..;;