ユニバ―サルセレクタとhtmlセレクタの違い

初歩的な質問失礼します。

cssで初期設定をする際にユニバーサルセレクタやhtmlセレクタを使っている
ブログ記事などを拝見するのですが、以下のコード3つは全て同じ意味でしょうか？

css
1* {
2}

css
1html {
2}

css
1* html {
2}

ユニバーサルセレクタは全ての要素に反映して、
htmlセレクタは<!DOCTYPE>以外の要素に反映して
ユニバーサルセレクタとhtmlセレクタの場合は上記と同じ意味？ですよね？

行動規範の内容に同意します

回答1件

ベストアンサー

全部意味が違います。

*だけのセレクタは、すべてのHTMLタグに直接適用されます。
htmlのセレクタは、書いての通り<html>自体に適用されます。継承などで内側に影響を及ぼすことはありえます。
* htmlは、本来の意味では「何かのタグの内側にある<html>要素」となり、正しく<html>をトップレベルに書いているHTML文書では、適用されるエレメントは存在しません。古いIEなどで間違って適用されるのを逆用することはありました。

投稿2020/12/30 07:26

編集2020/12/30 07:43

maisumakun

総合スコア145971

Larkiwing

2020/12/30 08:08

回答ありがとうございます htmlのセレクタは<html>自体に反映され継承されるということは例えば * { overflow-y:scroll; } と html { overflow-y:scroll; } の場合*はhtmlタグ全体に適用され htmlのほうは<html>と</html>に継承され内側が影響を受けるということは、つまり、 <html lang="ja"> <body> <div> </div> </body> </html> は全体に影響するという感じでしょうか？意味が同じような気がするのですが、違いますか？

maisumakun

2020/12/30 08:14 編集

> 意味が同じような気がするのですが、違いますか？はい、全く違います。特に、overflow-yは継承されませんし、逆に<div>へ直接適用すれば<div>の内側だけスクロールするようになります。

Larkiwing

2020/12/30 08:18

ということは、 * { overflow-y:scroll; } は全体に使われるため意味がありますが、 html { overflow-y:scroll; } の書き方は継承されないため間違っているということでしょうか？

maisumakun

2020/12/30 08:31 編集

> 間違っているということでしょうか？むしろ、*に対してoverflow-y:scroll;をかけるような乱暴なCSSの当て方は通常行いません（「全部の<div>が中でスクロールする」事態となります）。逆に、htmlへのoverflow-yの指定は、「ブラウザ枠全体」のスクロールを制御するものとしての意味を持ちます。

maisumakun

2020/12/30 08:25

> *はhtmlタグ全体に適用されそうではありません。html、head、body、div、aというあらゆるタグに対して適用する、という意味合いになります。

Larkiwing

2020/12/30 08:30

なるほど。そういうことですね。ありがとうございました。

行動規範の内容に同意します

あなたの回答

tips

プレビュー

行動規範の内容に同意します

質問の解決につながる回答をしましょう。サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。また、読む側のことを考えた、分かりやすい文章を心がけましょう。

15分調べてもわからないことは
teratailで質問しよう！

ただいまの回答率
85.36%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

『🎄teratailクリスマスプレゼントキャンペーン2024🎄』開催中！

＼teratail特別グッズやAmazonギフトカード最大2,000円分が当たる！／

ユニバ―サルセレクタとhtmlセレクタの違い

関連した質問