「CSS」:not()で特定の要素だけCSSを適用しない方法

2020年9月15日

構文
要素 :not()
説明
:not() 疑似クラス は、列挙されたセレクターに一致しない要素を表します。
CSSコード

.cft {
  text-shadow: 3px 3px 4px gold;
}

/* '.cft' クラスの中にない <p> 要素 */
p:not(.cft) {
  color: yellow;
}

/* <p> 要素ではない要素 */ 
body :not(p) {
  text-decoration: underline;
}

/* <div> または <span> 要素ではない要素 */
body :not(div):not(span) {
  font-weight: bold;
}

htmlコード
<p>data AAAA.</p>
<p class="cft">data BBBB</p>
<div>data CCCC.</div>