CSS 3のセレクタ解説::root、:not、:empty、:target

エ・ビスコム・テック・ラボ
2009-02-06 12:19:01
  • このエントリーをはてなブックマークに追加

:not(〜)

 :not(〜)は、指定した条件と一致しない要素にスタイルシートを適用するためのセレクタだ。

 たとえば、次のように指定すると〜内に記述した

以外の要素を黄色い背景色で表示することができる。「body *」は内のすべての要素をスタイルシートの適用対象とする指定だが、「:not(h1)」をつけることで「

以外の要素に適用する」という条件を付加している。サンプルの場合、

以外の

にスタイルシートが適用される。

(図4画像をクリックすると拡大します) 図4(画像をクリックすると拡大します)
body *:not(h1){
background-color: yellow;
}

テキスト

本文です。本文です。本文です。本文です。本文です。本文です。本文です。本文です。本文です。本文です。本文です。本文です。本文です。本文です。本文です。本文です。本文です。本文です。本文です。本文です。本文です。

引用文です。引用文です。引用文です。引用文です。引用文です。引用文です。引用文です。引用文です。引用文です。引用文です。

本文です。本文です。本文です。本文です。本文です。本文です。本文です。本文です。本文です。本文です。本文です。本文です。本文です。本文です。本文です。本文です。本文です。本文です。本文です。本文です。本文です。

ブラウザで表示を確認する

 なお、「body *」を削除して「:not(h1)」だけを指定すると、にもスタイルシートが適用され、ページ全体の背景が黄色で表示される。

:empty

 :emptyはタグでマークアップしたコンテンツが空の要素にスタイルシートを適用するセレクタだ。たとえば、テーブルを利用した表組みには値の入っていない空のセルが発生するケースがある。次のサンプルでは右下のセルが空となっている。

図5 図5
ABC
DE
ブラウザで表示を確認する

 これに対して、次のように:emptyでスタイルシートを指定すると、空のセルだけを黄色の背景色で表示することができる。

図6 図6
:empty{
background-color: yellow;
}
ブラウザで表示を確認する

このサイトでは、利用状況の把握や広告配信などのために、Cookieなどを使用してアクセスデータを取得・利用しています。 これ以降ページを遷移した場合、Cookieなどの設定や使用に同意したことになります。
Cookieなどの設定や使用の詳細、オプトアウトについては詳細をご覧ください。
[ 閉じる ]