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

CSSの擬似クラス/notについて解説します。

検証環境

CSS

macOS

14.1

not

擬似クラス/notは“セレクターにマッチしないことを表す擬似クラス”です。

基本構文

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

サンプル

p要素かつclass属性値がformal-nameでない要素にスタイルを適用するサンプルです。

sample.html

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

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

プレビュー