*全称セレクタの使いどころ

[新着] Webテンプレートを仮オープンしました

0   名前： あみ ： 2007/02/13（火） 21:29  ID:GzzByqjA sub-Jr
いろいろなサイトのスタイルシートをのぞいて研究しているのですが、どこのサイトもたいてい全称セレクタをつかっているように感じます。

全称セレクタの使い方等は、このサイトを読んで勉強済みなのですが、使い方がよくわかりません。
ページ内の全要素に指定っていうのは、BODYタグに指定するときと比べてどのような違いがあるのでしょうか。
1   名前： Z ◆XTzyosZXcL ： 2007/02/13（火） 21:29  ID:wMpJdqee sub-Cl
　ずばりの回答が過去発言検索でもちょっと見当たらなかったのでうろ覚えですが・・・全称セレクタを使うことでUAの初期スタイルシートを無効化し、製作者の意図した表示にさせやすい、といったことだと思います。
　ただ、そもそもCSSに非対応（旧型の携帯電話）などもありますので、WWWという「全世界に公開され、どんなUAでアクセスされるか分からない」場所で意図した表示となるかは保証の限りではありません（ユーザースタイルシート対応のUAであれば、ユーザー側で自分の好みのスタイルを設定することも可能ですし）。

参考・CSS対応状況表（セレクタ）：
http://hp.vector.co.jp/authors/VA022006/css/corrbrwser/selector.html

参考・ホームページは見栄えが不定：
http://members.jcom.home.ne.jp/jintrick/Personal/markup_readme.html#icatch

余談・HTML FAQ（よくある質問と回答）：
http://members.jcom.home.ne.jp/pctips/www/faq/
2   名前： あみ ： 2007/02/13（火） 21:29  ID:GzzByqjA sub-Jr
たくさんのＵＲＬありがとうございます。見て勉強させてもらおうと思います

＞UAの初期スタイルシートを無効化
というのはＢＯＤＹタグに指定することではできないのでしょうか？
質問を重ねるようなかたちになってしまい申し訳ありません。

よろしくおねがいします。
3   名前： Z ◆XTzyosZXcL ： 2007/02/13（火） 21:29  ID:wMpJdqee sub-Cl
　あ、資料を探していたら>>1の補足としてこんな注意事項も見つけました。

CSS を書く前に読んでもらいたいこと）
http://hxxk.jp/2006/04/09/1940

から引用／「CSS を書く前によく使う指定もパッケージしておく」：
全称セレクタでのリセットは手軽にできて便利なのですが、その分全てのプロパティや各種のセレクタを考慮してスタイルシートを書く必要があります。 特に子孫セレクタを使ったときなどに、全称セレクタのリセット指定がそのまま出てしまうことが後から発覚したりしますし。


で、>>2については下記が理由でしょうか（あくまでも一例で、他にもありそうですけど）。

Mozilla 5.0系 CSSバグリスト）
http://cssbug.at.infoseek.co.jp/detail/mozilla/b061.html

からの引用／
WinIEやOperaはbody要素をルート要素にしているのに対し、Mozilla/Netscapeはhtml要素をルート要素と考えることができます。ただし、これはheightプロパティの算出という条件下で考えられるものであり、HTML/XHTMLパーサが解釈する木構造上のルート要素とは一致しない可能性があります。
4   名前： 匿名 ： 2007/02/13（火） 21:29  ID:rEkc4Z1y sub-kJ
>>0
揚げ足を取るが、「タグ」にはスタイル指定できない。どう頑張っても。

使い道を 2 つ考えてみた。


(1). 要素名以外での要素の絞り込み

そもそも、
.class-name { }
#id-name { }

は
*.class-name { }
*#id-name { }

の省略形。だから、全称セレクタには間違いなくお世話になっているはずだ。全称セレクタの使い道の 1 つは、このようにクラス名や id 名などを利用して、要素名以外で要素を絞り込むこと。
li > *:first-child + * { color: red; }

↑ li 要素直下の、最初の要素（何でも良い）の、次の要素（何でも良い）は赤くなる。
*.section1 *#table-of-contents *[title] { color: red; }

↑ class="section1" の要素内（何でも良い）で、id="table-of-contents" を持つ要素内（何でも良い）で、title 属性を持つ要素（何でも良い）は赤くなる。


(2). 継承しないプロパティの一括指定

CSS（Cascading Style Sheets）の「Cascading、継承」の意味を考えてみると良い。body 要素のボックスに与えたプロパティの、何が子孫に継承されて、何が子孫に継承されないのか（例えば、color は継承するが、margin は継承されない）。

継承されないプロパティは、当然だが子孫要素一つ一つに指定してやらねばならない。そのときに、全称セレクタが活躍する。例えば border は（初期値では）継承されないから、全ての要素に border を引くときは↓と書く。ボックス配置を確認するときによく使わないか？
* { border: 1px solid black; }

同様に、margin、padding、display も（初期値では）継承されないから、
* { margin: 0; padding: 0; display: inline; font-size: 100%; }

とかしてみれば、新しい世界が見えてくるかもしれない。ここから、全く新しいスタイルを創造してみてくれ。
5   名前： 匿名 ： 2007/02/13（火） 21:29  ID:rEkc4Z1y sub-kJ
> 「Cascading、継承」

ごめん、素で間違えた。「Cascading、段階的」。ここの一文は無視してちょ。
6   名前： Z ◆XTzyosZXcL ： 2007/02/13（火） 21:29  ID:D13KwVcf sub-Ds
　全称セレクタをめぐる議論で、さらにいきつけのサイト経由で「スターハック」なるものを見つけましたのでこれもご紹介します（ポイントは記事タイトルそのもの＞CSSはHTMLだけのものじゃない）。

CSSはHTMLだけのものじゃない：
http://kuruman.org/diary/2007/02/08/css-not-only-for-html

スターハックに端を発するアレコレ：
http://www.hamashun.com/blog/2007/02/post_20.html

Re: スターハックに端を発するアレコレ：
http://kuruman.org/diary/2007/02/11/re-starhack

>>4-5 ID:rEkc4Z1y sub-kJさん、詳細なご説明ありがとうございます。私にとっても参考になりました。
7   名前： あみ ： 2007/02/13（火） 21:29  ID:JUFNavG. sub-Jr
＞Ｚさん
たくさんのＵＲＬありがとうございます。
ユーザースタイルシートというものの存在を今知りました。


＞匿名さん
丁寧な説明ありがとうございます。
よくわかりました。
一覧へ戻る