【CSS】:not（擬似クラス） - マッチしない要素

CSSの擬似クラスの１つ、notについてご紹介します。

not

擬似クラスnotはセレクターにマッチしない要素です。

基本構文

:not(セレクター) {
    プロパティ名: プロパティ値;
}

サンプル

次のサンプルコードはp要素かつclass属性値がformal-nameではない要素にスタイルを適用します。

sample

<style>
p:not(.formal-name) {
    color: red;
}
</style>

<h1>CSSとは</h1>
<p class="formal-name">CSSの正式名称はCascading Style Sheetsです。</p>
<p>プログラミング言語に分類されます。</p>

プレビュー