擬似クラス :empty と :not の使い方

空の要素を選択できる擬似クラス :empty と否定を意味する疑似クラス :not の使い方を説明した記事になります。

:empty の使い方

例として以下のような HTML があったとして説明します。この HTML では li 要素の四番目のリスト4になるものが空になっています。これを :empty を使って空の要素の背景色を変えてみたいと思います。

＜HTML ソース＞

<ul>
 <li>リスト1</li>
 <li>リスト2</li>
 <li>リスト3</li>
 <li></li>
 <li>リスト5</li>
</ul>

＜CSS ソース＞

li:empty {
 background: orange;
}

＜ブラウザの表示＞

コメントは空白とみなされる

以下の例では li の二番目がコメント、四番目が空の要素になっています。この状態で :empty を使うと以下のようになります。

＜HTML ソース＞

<ul>
 <li>リスト1</li>
 <li><!-- コメントです --></li>
 <li>リスト3</li>
 <li></li>
 <li>リスト5</li>
</ul>

＜CSS ソース＞

li:empty {
 background: orange;
}

＜ブラウザの表示＞

空とみなされない場合

＜HTML ソース＞

<ul>
 <li>リスト1</li>
 <li> </li>
 <li>リスト3</li>
 <li>
 
 </li>
 <li>リスト5</li>
</ul>

＜CSS ソース＞

li:empty {
 background: orange;
}

＜ブラウザの表示＞

:not の使い方

否定を意味する擬似クラスです。「〜ではない」ということなので以下の HTML を使って説明します。例として p 要素を使って「段落ではない」を指定してみます。書き方は :not( ) 括弧にはセレクターを渡してあげます。

＜HTML ソース＞

<h1>見出し1</h1>
<p>段落です</p>
<p>段落です</p>
<h2>見出し2</h2>
<p>段落です</p>
<p>段落です</p>

＜CSS ソース＞

:not(p) {
 background: yellow;
}

＜ブラウザの表示＞

まとめ

疑似クラス :empty の指定方法

要素:empty {
 プロパティ: 値;
}

疑似クラス :not() の指定方法

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