From 6c1c1ef36d999fb9761c73b7f49eae58a9188767 Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Tue, 4 Jan 2022 22:08:24 +0900 Subject: 2021/08/13 時点の英語版に同期 MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- files/ja/web/css/_colon_root/index.md | 84 +++++++++++++++++------------------ 1 file changed, 40 insertions(+), 44 deletions(-) diff --git a/files/ja/web/css/_colon_root/index.md b/files/ja/web/css/_colon_root/index.md index 902dac18db..1ab5ebdf37 100644 --- a/files/ja/web/css/_colon_root/index.md +++ b/files/ja/web/css/_colon_root/index.md @@ -1,63 +1,59 @@ --- title: ':root' -slug: 'Web/CSS/:root' +slug: Web/CSS/:root tags: - CSS - - Layout - - Pseudo-class - - Reference - - Web + - 要素 + - レイアウト + - ノード + - 擬似クラス + - リファレンス - セレクター - - 疑似クラス -translation_of: 'Web/CSS/:root' + - ウェブ + - root +browser-compat: css.selectors.root +translation_of: Web/CSS/:root --- -
{{CSSRef}}
+{{CSSRef}} -

CSS の :root 疑似クラスは、文書を表すツリーのルート要素を選択します。 HTML では、 :root は {{HTMLElement("html")}} 要素を表し、詳細度が高いことを除けば html セレクターと同等です。

+**`:root`** は [CSS](/ja/docs/Web/CSS) の[擬似クラス](/ja/docs/Web/CSS/Pseudo-classes)で、文書を表すツリーのルート要素を選択します。 HTML では `:root` は {{HTMLElement("html")}} 要素を表し、[詳細度](/ja/docs/Web/CSS/Specificity)が高いことを除けば `html` セレクターと同等です。 -
/* 文書のルート要素（HTML の場合は <html>）を選択 */
+```css
+/* 文書のルート要素（HTML の場合は ）を選択 */
 :root {
   background: yellow;
-}
+} +``` -

構文

+## 構文 {{csssyntax}} -

例

+## 例 + +### グローバルの CSS 変数 -

:root はグローバルの CSS 変数を宣言するのに便利です。

+`:root` はグローバルの [CSS 変数](/ja/docs/Web/CSS/Using_CSS_custom_properties)を宣言するのに便利です。 -
:root {
+```css
+:root {
   --main-color: hotpink;
   --pane-padding: 5px 42px;
 }
-
- -

仕様書

- - - - - - - - - - - - - - - - - - - - - -
仕様書策定状況コメント
{{SpecName('CSS4 Selectors', '#root-pseudo', ':root')}}{{Spec2('CSS4 Selectors')}}変更なし。
{{SpecName('CSS3 Selectors', '#root-pseudo', ':root')}}{{Spec2('CSS3 Selectors')}}初回定義。
- -

ブラウザー実装状況

- -

{{Compat("css.selectors.root")}}

+``` + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- {{HTMLElement("html")}} +- {{domxref("Document.rootElement")}} +- {{domxref("Node.getRootNode()")}} +- {{domxref("Element.shadowRoot")}} +- {{domxref("ShadowRoot")}} -- cgit v1.2.3-54-g00ecf