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

アイキャッチ画像 CSS

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

:empty の使い方

疑似クラス: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;
}

<ブラウザの表示>

  • リスト1
  • リスト2
  • リスト3
  • リスト5

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

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

<HTML ソース>

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

<CSS ソース>

li:empty {
 background: orange;
}

<ブラウザの表示>

  • リスト1
  • リスト3
  • リスト5

空とみなされない場合

半角空白や改行が含まれていると空とはみなされません。

<HTML ソース>

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

<CSS ソース>

li:empty {
 background: orange;
}

<ブラウザの表示>

  • リスト1
  • リスト3
  • リスト5

:not の使い方

疑似クラス:notの説明画像

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

<HTML ソース>

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

<CSS ソース>

:not(p) {
 background: yellow;
}

<ブラウザの表示>

見出し1

段落です

段落です

見出し2

段落です

段落です

まとめ

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

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

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

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

コメント

タイトルとURLをコピーしました