全称セレクターと擬似クラス

HTML&CSS

全称セレクターは簡単なサンプル作成時にmarginやpaddingを初期化する時くらいしかお目にかからないのですが、実はもっと使い方があります。
CSSの仕様書には次のように記述されています。

全称セレクタ * (名前空間接頭辞なし) が 単体セレクターシーケンス 中のコンポーネントたった1つではなく、また直後に 擬似要素 が存在しない場合、その * を省略し全称セレクタの存在を暗示させてもよい。

つまり「*.warning 」と 「.warning」 は同じことであり、「*#myid」 と 「#myid」 も同じことを表します。通常のクラスセレクタやIDセレクタの記述は全称セレクタを省略して記述していることになります。

注意すべき点として仕様書では次のような注意点の記述があります。

Note: 混乱を避けるため * は省略しないことが望ましいだろう。混乱とはたとえば div :first-child と div:first-child の違いを考えると分かりやすい。この場合は div *:first-child と記したほうが理解しやすいだろう。

擬似クラスで「div :first-child」と記述する場合は混乱を避けるために「div *:first-child」と記述すべきです。

困ったことに、「HTML5&CSS3標準デザイン講座」 翔泳社発行の本では擬似クラスの説明を「E :first-child()」で行なっていることです。
これは「E *:first-child()」ことであり、特殊な使い方になるのですが、全称セレクターを省略したことわりの記述は全く無くありません。
しかも、この記述でのマッチングを説明しています。
これは通常の記述の「E:first-child()」と全く違うマッチングになります。この本で勉強した人はくれぐれも気をつけてください。
また、「E:nth-child(n)」や「E:nth-of-type(n)」の使い方も全てこの記述となっていますのでご注意ください。
著者は本当に擬似クラスの使い方を理解しているのか疑問に思う次第です。

タイトルとURLをコピーしました