web-dev-qa-db-ja.com

CSS3の：root擬似クラスとhtmlの違いは何ですか？

私はこれについて多くの情報を見つけることができないようです。

Smashing Magazine はhtmlおよび:rootは同じものですが、確かに小さな違いがあるはずです。

csscss-selectorspseudo-class
45
sanjaypoyzer

W3C wiki から：

:root疑似クラスは、ドキュメントのルートである要素を表します。 HTMLでは、これは常にHTML要素です。

CSSは、汎用のスタイル言語です。 HTMLだけでなく、他の種類のドキュメントでも使用できます。たとえば、SVGで使用できます。

仕様 （私の強調）から：

この仕様は、カスケードスタイルシート、レベル2リビジョン1（CSS 2.1）を定義しています。 CSS 2.1は、作成者とユーザーがスタイル（フォントやスペースなど）を構造化文書（HTMLドキュメントやXMLアプリケーションなど）に添付できるスタイルシート言語です。

59
Felix Kling

それらの間の1つの技術的な違いは:root-疑似クラスであることはhtml（型セレクター）よりも特定性が高い

:root {
  color: red
}
html {
  color: green;
}
<div>hello world</div>

したがって、上記の例では、:rootセレクターはhtmlセレクターをオーバーライドし、テキストは赤で表示されます。

58
Danield

HTMLドキュメントの場合、違いはありません。ルート要素は<html>タグであるため、html{}と:root{}は（特異性の違いを除いて）意味的に同等です。

ただし、CSSはHTMLだけでなく、すべてのXMLのようなドキュメントにも適用できます。これが:rootが存在する理由です。ドキュメントのタイプに関係なく、ドキュメントのルート要素をターゲットにします。 CSSの圧倒的多数のユースケースがHTMLドキュメントのスタイルを設定しているため、ほとんどの人は違いに戸惑います。

例：CSSを使用してSVGドキュメントのスタイルを設定できます。それをスタイリングするとき、ルート要素は（明らかに;-)）htmlではなくsvgになります。以下の SVGタグ のリストを参照してください。

13
Christoph