peto asked 3年 ago
chapter08にセレクタの設定について記載されています。
セレクタ「html」とセレクタ「html *」が同じものを指しているように思えてしまうのですが、別物なのでしょうか。
また、セレクタ「html」にフォントを設定されておりますが、
<head>内のタグにはどういった効果があるのでしょうか。
よろしくお願いします。
狩野 祐東 Staff answered 3年 ago
セレクタの「html」と「html *」はなにが違うのか？というご質問ですね。
セレクタとしては「html」としたら<html>を、「html *」としたら<html>の子孫要素すべて（<html>自身は除く）を選択し、スタイルを適用します。
ちょっと高度な話題のため本書には書いていませんが、CSSのプロパティ（font-familyとかbox-sizingとか）には子孫要素に「継承」するものと、しないものがあります。継承するプロパティは、子要素、そのまた子要素にも、同じスタイルが適用されます。
font-familyプロパティは継承するため、<html>を対象に設定すれば、その子孫要素にも同じ値が設定されます。
逆にbox-sizingプロパティは継承しないため、すべての要素を対象にスタイルを設定しないといけません。セレクタを「html *」にしているのは、<html>の子孫要素すべてに「box-sizing: border-box;」を適用したいからです。
なお、セレクタが「html *」だと<head>にもその子要素にもスタイルが適用されますが、ページに表示されるものがないので何の影響もありません。
peto answered 3年 ago
早速のご返答ありがとうございます。
セレクタを「html *」にしても、<head>には影響ないということは、<body>部分のみに影響があるとの解釈したのですが、この場合、「body *」で設定してはいけないのでしょうか。
極端になってしまうのですが、
『セレクタを「*」にすれば、「html」、「html *」（「body」も？）のすべて満たす』
と考えてしまうのですが、これは不可能なのでしょうか。
よろしくお願いします。
狩野 祐東「body *」 だと、bodyタグは選択されず、スタイルが適用されないことになります。これだと、サイトの作りによっては思ったとおりに表示されない可能性があります。
「*」だけだと、htmlタグにも適用されます。本書掲載サンプルの場合は「*」でも問題はありませんが、詳しく説明しませんが実践的なWebデザイン（とくに、古くからあるサイトを部分的にリニューアルするなどの場合に）では、これでは対応が難しいケースが出てくるので、一般に、「box-sizing: border-box;」をすべての要素に適用する際のセレクタは「html *」にします。