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

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

:root

 :rootはルート要素にスタイルシートを適用するためのセレクタだ。ルート要素とは最上位階層に位置する要素のことで、HTML文書では全体をマークアップしているがルート要素となる。





SAMPLE



テキスト

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

※ と に注目

 これに対して、:rootで次のようにスタイルシートを指定すると、コンテンツ全体が黄色い罫線で囲んで表示される。さらにここでは、でマークアップしたbody要素を黄緑色の罫線で囲むように指定しており、body要素はルート要素の内側に表示されることがわかる。

図1(画像をクリックすると拡大します) 図1(画像をクリックすると拡大します)
:root{
background-color: yellow;
}

body{
background-color: limegreen;
}
ブラウザで表示を確認する

 なお、ルート要素とbody要素に背景関連のスタイルシートを指定した場合、条件によって背景の表示範囲が変わるため注意が必要だ。たとえば、次のサンプルではルート要素の背景色を黄色に、body要素の背景を黄緑色に指定している。この場合、ルート要素に指定した背景がブラウザ画面いっぱいに表示される。

図2(画像をクリックすると拡大します) 図2(画像をクリックすると拡大します)
:root{
background-color: yellow;
}

body{
background-color: limegreen;
}
ブラウザで表示を確認する

 一方、ルート要素に背景を指定せず、body要素にだけ背景を指定した場合は、次のようにbody要素の背景だけではなく、ブラウザ画面いっぱいに表示される。

図3(画像をクリックすると拡大します) 図3(画像をクリックすると拡大します)
body{
background-color: limegreen;
}
ブラウザで表示を確認する

:not(〜)