CSSで、h1#logoという書き方は

質問

CSSの勉強を始めました。
IDは、例として #wrapper とか　#header　など＃をつけて、クラスの場合は、「．side」などのように「ドット（．）をつけることはわかりました。

疑問なのが 「h1#logo」 というようにタグに続けて#（ID名）を書く書き方です。
ID名の前にタグ(h1)名がきて、それもスペースなしで続けて書くわけですが、どういう意味でしょうか。
h1に設定した#logoという意味でしょうか。

１度しか使わないこととして、address#ID名 や table#ID名もありでしょうか。

回答No.5

・真 綾・（@Ma-yan_bh1011） · ベストアンサー

どうも#2です。
その後予想通りの展開になっていて安心しました(笑)
さて、

＞h1は、ページで１回しか使わないので、h1に対してCSSを設定してもいいのではとも思えるのです　→　h1{ 　｝
とのことですが、その通りです。
そのHTMLファイル内でh1を1回しか使わないのであれば、そもそもHTMLタグにてid属性やclass属性を設定する必要がありませんよね。h1タグに対しスタイルを設定すればいい話です。h1が複数ある場合のみ、h1#logoが意味をなすのですから。

＞なぜ、わざわざ h1#logo とidを設定するのかがよく理解できません。
＞優先度の点数を高めるため？などの根拠があるのでしょうか。
理由はいろいろあるでしょう。例えば後から見たときに見つけやすくするためとか。ぶっちゃけ書いた本人にしかわかりません。
つまり、「ありでしょうか」といわれれば当然ありです(文法上なにもおかしくない)が、やる必要はないということですね。

とにかく、まず最初に大事なのは正しく書くことです。この場合の「正しい」とは「ブラウザがきちんと解釈できる」という意味になります。
原理主義的にガチガチの仕様を覚えるのはそのあとで構いません。

お礼

何度も回答くださってありがとうございます。解決したかったことが、おかげでわかりました。

回答No.6

Chaire

「h1 をページ内で一回しか使わない」ことはないですよ（そういうポリシーを持ってるなら、まあ、止めはしませんが）。

ひとつ変わった例として、次のようなものを考えてみます。

<h1>...</h1>
<h2 id="ima-miteru">...</h2>
<h2>...</h2>

h2#ima-miteru { color: red } とすると、その h2 が赤くなります。さて、スクリプトを使って、id="ima-miteru" を次の h2 に移動させます。

<h1>...</h1>
<h2>...</h2>
<h2 id="ima-miteru">...</h2>

するともちろん、次の h2 が赤くなります。さて、全部見終わったので id="ima-miteru" を最初の h1 に戻しましょう。

<h1 id="ima-miteru">...</h1>
<h2>...</h2>
<h2>...</h2>

すると、h1 は h2#ima-miteru にマッチしませんので、赤くなるものがありません。これで「見終わったので、最初から」を表せます。

こんな風に id を移動させることで、いろいろ楽しいことができるわけです。まあ、スクリプトが必要なのがアレですけどね。

※WAI ARIA の @aria-activedescendant など。

---
CSS を書くときに守った方が良いことは、詳細度の低いものから高いものの順に書くことです。詳細度の計算についてはご自分で調べて頂くとして、

/* 詳細度は (1, 0, 0) で、どんな要素でも id="HOGE" を持つものなら適用 */
#HOGE { ... }

/* 詳細度は (1, 0, 1) で、id="HOGE" を持つ h1 だけに適用 */
h1#HOGE { ... }

要するに、割と広く適用されるものは先に書き、用途が限定的なものは後に書く、ということです。そうすれば CSS が比較的すっきりしますし、メンテナンスもしやすくなります（CSS 規則の優先順位と上書きルール）。

※ごく個人的な懸念を申し上げれば、#wrapper とか #header とかの ID を振っているソースは、最初のうちはあまり真似しない方が良いような気がしなくもないです。
※ちなみに「ブラウザがきちんと解釈できる」ものを具体的にまとめたものが HTML(5) 規定です。あれはブラウザの振る舞いの規定です。

お礼

詳しく説明してくださってありがとうございます。まだ十分理解できませんが、また何かありましたらお願いします。

回答No.4

ORUKA1951

＞でも、h1は１回しか使わないので、「id="hoge"属性を持つh1要素にのみ」というのがまだわかりません。

　外部スタイルシートを複数のページで使い回しするとき、CSSに
h1#hoge{color:red;}
h2#hoge{color:green;}
と書かれていたとしたら、・・・・・

　必要なら、全称セレクタ(省略できる)ではなく、タイプセレクタを付けなさい・・ということ。

　セレクタ---どれに適用するかの「選択手段」です。色々な書き方で、どの要素に適用するかを指定すればよい。

お礼

ありがとうございます。やっと使い方、使い分けがわかりました！

回答No.3

ORUKA1951

現在ウェブ標準のCSS2.1は、CSS2以降導入された*(全称セレクタ)を忘れては語れません。
セレクタは、基点となるセレクタに接続詞でセレクタをつなげていきます。それぞれのセレクタには詳細度(selector's specificity)が決められています。
まず、最初に基点となるセレクタを書きます。
^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
[タイプセレクタ]
div
これはタイプセレクタと呼ばれるものでHTMLの要素(element)に当たるものです。詳細度はd=1です。
em{font-weight:bold;}とか
[全称セレクタ]
*
CSS2で登場した全称セレクタです。!!これを、知らないか忘れてる。CSS2以降では、これが省略されている(基点となるセレクタが無い場合*があるとみなします。)必ず書くほうが理解しやすい。すなわち
#hoge は、*#hogeとみなします。一意セレクタを持つすべての要素でid="hoge"をもつものと言う意味になります。HTMLの仕様上そのページには一箇所しか存在し得ないですから、一意ではあります。
　一方h1#hogeは、id="hoge"属性を持つh1要素にのみ有効です。
★一見同じ動作をしますが、意味はだいぶ違う。

　ついで、それにセレクタを結合子で続けていきます。これらもセレクタです。
CSS2では、結合子には、子孫[ ](半角スペース)、子供[>]、兄弟[+]の三つがあります。

div.section p strong{}
div.section>p strong{}
div.section p+p strong{}

また、さらにオプションセレクタとして、クラスセレクタ[.]、要素セレクタ[[]]、擬似要素セレクタ、擬似クラスセレクタ[:first-child]、リンクの擬似クラス[:link,:visited]、動的なリンクの擬似クラス[:hoverとか]、一意セレクタ[#]、擬似要素[:first-line,:before]・・

　これらと、スタイルシートの出所(たとえばstyle要素、head内、外部)、著者のものかユーザー指定なのか、important!があるかないか、最後に詳細度で適用される要素が決まります。

　この部分は、カスケード処理と呼ばれるCSS(カスケーディング スタイルシート)の根幹をなす部分ですから、最初にきちんと学ぶ必要があります。
　なお、詳細度の計算は、CSS2.1で、CSS2.0から変更されましたのて゜注意してください。
★Cascading Style Sheets Level 2 Revision 1 (CSS 2.1) Specification ( http://www.w3.org/TR/CSS2/ )
★REC-CSS2 邦訳 ( http://www.swlab.it.okayama-u.ac.jp/man/rec-css2/cover.html#minitoc )
　CSS2.1の邦訳は知りません。セレクタ、カスケードのページだけはしっかりと読むこと

お礼

回答いただきありがとうございます。
たぶん正解となる内容を書いてくださっているかとは思いますが、私には少々むずかしくわかりません。ただ、「 h1#hogeは、id="hoge"属性を持つh1要素にのみ有効 」という、この部分で何となく自分なりに区別がわかったような気がします。

でも、h1は１回しか使わないので、「id="hoge"属性を持つh1要素にのみ」というのがまだわかりません。id="hoge"属性を持たないh1は共存しないし、同じidは１回しか使わないとすると、h1#hogeと重ねる意味が（たぶんこの部分の説明を回答の中でしてくださっていると推測しますが）・・・・やっぱり理解できていないようです。理屈っぽいこと（わけのわからないこと）を言ってすみません。

回答No.2

・真 綾・（@Ma-yan_bh1011）

通りすがりに一つだけ。

＞h1の中にあるid=logo という意味で、h1 #logoでもいいように思ってしまったのですが。
＞h1 #logo{
これは確かに「h1の中にあるid=logo」ですが、この「中にある」とは「入れ子」のことです。
<h1><img src="hoge.jpg" id="logo"></h1>
の「id="logo"」を指します。
半角スペースを空けると、「(左側)より内側にある(右側)」への指定となります。
詳しくは「子孫セレクタ」で調べてください…

…って、まあ、詳細な説明をしてくれる人がこの後100%現れますのでそれを待っていただいても構いません(笑)

補足

詳しく説明していだたいてありがとうございます。
h1は、ページで１回しか使わないので、h1に対してCSSを設定してもいいのではとも思えるのです　→　h1{ 　｝

なぜ、わざわざ h1#logo とidを設定するのかがよく理解できません。
優先度の点数を高めるため？などの根拠があるのでしょうか。

回答No.1

t_ohta

h1#logo { color: red; }
とcssに書くと
<h1 id="logo">xxxx</h1>
の文字色は赤になりますが
<h1>xxxxx</h1>
は変わりません。
<div id="logo">xxxx</div>
も適用されません。

id名やclass名はスタイルシートだけでは無くJavaScriptから要素を特定する場合にも使いますのでaddress#ID名といった使いかたもあり得るのではないでしょうか。

補足

すぐに回答くださってありがとうございます。たとえがあったので、よくわかりました。

ところで、くどいおたずねで失礼かとは思いますが、
どうして以下の(1)の書き方ではだめなのでしょうか。
h1の中にあるid=logo という意味で、h1 #logoでもいいように思ってしまったのですが。

(1) h1 #logo{
(2) h1#logo{