web-dev-qa-db-ja.com

css / html `root`要素とは何ですか？

最近、NetBeans IDE（6.9.1）の使用を開始し、進行中のサイトにスタイルシートを追加するために使用しました。

驚いたことに、1つの要素が自動的に追加されました。

root { 
    display: block;
}

周りを見回すと、:root疑似クラスに関する情報はいくつか見つかりましたが、root要素自体については何も見つかりませんでした。

root要素とは何ですか？それは何か用途がありますか？

htmlcssnetbeans
28
jeroen

HTMLにはcalledrootという要素はありません。 html要素自体は「ルート要素」（ドキュメント内の他のすべての要素の祖先である要素に与えられた用語です）ですが、これはhtml { }と一致します。

ただし、 :root pseudo-class （コロン付き）を参照してください。

10
Quentin

ここから： http://www.quirksmode.org/css/root.html

：root疑似要素は、ページ内のすべてのブロックのルートを選択します。最初の包含ブロック。 HTMLでは、これは明らかに<html>要素

テストスタイルシート：

 :root {    
     background-color: #6374AB;
    padding: 50px; 
 }

：rootセレクターが機能する場合、ページの左右の列は青で、白い中央の列は50ピクセルオフセットされています。

12
David

rootは、NetBeansIDEのスタイルシートテンプレート内の要素のプレースホルダーです。これは微積分のダミー変数のようなものです。 root { display: block; } delete y：のy：にカーソルを置き、yと入力してください。 IDEは、貴重な情報を提供する命令ウィンドウにポップアップ表示されます。これらは、単なるダミー変数のようなルートの意味を実行します。例はem {display: inline; }です。さらに、ルートは、ルートが開始すると、ブランチとリーフを持つhtmlツリーの最も深い祖先になります。したがって、最初はデフォルトでボックスがあり、デフォルトの表示を次のような他の値に変更しない限り、すべてのブランチとリーフはそのデフォルトに従います。インラインと言います。

11
peter jones

：rootを使用してCSS変数を宣言できます

誰かがこの古い質問を見つけて情報が必要な場合に備えて、:rootは、ドキュメント全体で使用できるようになるCSSカスタムプロパティまたは「変数」を宣言する例でよく使用されます。例えば：

:root {
  --darkGreen: #051;
  --myPink: #fce;
}

section {
  color: var(--darkGreen);
  background: var(--myPink);
}

article h3 {
  color: var(--darkGreen);
}

ただし、任意の要素をCSS変数（:rootだけでなく）のセレクターとして使用できるため、htmlまたはbodyは、ページ上のすべての要素がそれらにアクセスできるようにします。 :rootを使用する正当な理由がある場合は、それを知りたいと思います。

参照：

6
Dave Everitt

:root要素は親を持たない要素なので、HTMLのルート要素は<html>要素だけだと思います。したがって、:rootセレクターを使用してスタイルを設定すると、ドキュメント全体のスタイルを設定します。

（詳細については、こちらをご覧ください： http://webdesign.about.com/cs/css/qt/tipcsschild.htm およびこちら： http://www.w3schools.com/ cssref/sel_root.asp ）。

4
mariamtin

Rootとhtmlには違いがあり、root疑似クラスはCSS3エンティティであり、古いブラウザには影響しません（MSIE 8以下、Opera 9.4以下）

html /* for all web browsers */
{
    color:red; 
}

次のように、Wordのルートの前にコロンを付ける必要があります...

:root /* for CSS3 web browsers: Chrome, Firefox, MSIE 9+, Safari, Opera 9.5+ */
{
    color:blue;
}

これらのCSS行の両方を使用した場合、MSIEバージョン8以下（または互換モードで実行している場合はMSIE 9以降、MSIE 7としてレンダリング）は赤いテキストを表示し、他のほとんどのブラウザーは青いテキストを表示します。

'root'のドキュメントと仕様は、Mozilla Developer Networkにあります： https://developer.mozilla.org/en-US/docs/Web/CSS/:root

2
Jeff Clayton