CSSのクラス

質問

p#ai {font-size:80%;}
ul#ai {font-size:70%;}
というようにIDを使ってもいいのですか？

回答No.4

神崎 渉瑠（@taloo）

CSSの文法上は可能です。

※HTMLにて、IDを使っては行けない、または使わない方が良いという場合があります。

回答No.3

ORUKA1951

誤解されている方が多いようなので詳しく説明しておきます。スタイルシート自体は、まったく問題ありません。よく使う手法なので覚えておきましょう。
意味は
一意セレクタai(HTML上ではID属性)である、p(タイプセレクタ--HTMLでは要素(エレメント)}に対する{font-sizeプロパティの値に80%と言う値を持つ}規則集合です。詳細度は[0,1,0,1]になります。

　一つのHTMLに複数の一意の要素は存在しえませんから、適用させるHTMLに、複数のidはありませんが、異なるHTMLにおいては問題ありません。

HTML1
・・・・
<p id="ai">なんたらかんたら</p>
・・・・

HTML2
・・・
<ul id="ai">
　<li></li>
・・・
のような場合です。この手法は便利でよく使われる方法ですので覚えておくと良いです。

　通常はスタイルシートを
#navigation{color:red;}/* 詳細度 [0,1,0,0]
　のように、全称セレクタ(これは全称セレクタが省略してある書き方ですが、このスタイルを<div id="navigation">にだけ適用する場合は、div#navigationと書くと、他のページで<ul id="navigation">には適用されないので安全です。
　また、サイト全体で
#navigation{color:red;}
としてあっても、特定のページでそのIDが他の要素に使われている場合
div.#navigation{color:green;} /* 詳細度[0,1,0,1] */
となって上書きできます。
　このように、適用させたい要素をセレクタをつかって詳しく書くことは、想定外の要素にスタイルが適用されないためにも極めて有効です。

　その意味--カスケーディング--をしっかり理解して使う分には問題ありません。

回答No.2

f_yamaguchi

結論だけ言ってしまうと、それではいけません。

加えて、もう一点。
例えばCSSに、

--------------------
p#aaa{
font-size:100%;
}
--------------------

と設定すると、HTMLでは、

-----------------------------------
<p id="aaa">いろはにほへと</p>
-----------------------------------

と記述することになりますが、
idは、同一ページ内には一箇所しか使えないルールになっていますので、
pタグなど、同じページ内に何回も登場する可能性が高いものには不向きと言えます。

このような場合、次のように「.」を使うと、同一ページ内で何度も使えるようになります。

--------------------
p.aaa{
font-size:100%;
}
--------------------

「#」を「.」に換えます。

-----------------------------------
<p class="aaa">いろはにほへと</p>
-----------------------------------

「id」を「class」に換えます。

さて、pとulについてですが、フォントのサイズを変えて適用したいのであれば、

CSSは、
---------------------------
p.ai01{
font-size:80%;
}
ul.ai02{
font-size:70%;
}
---------------------------

のように、「.」以下の文字を変えてやる必要があります。
HTMLでは以下のようになります。

--------------------------------------------------------
<p class="ai01">フォントサイズ80％で表示したい文字</p>

<ul class="ai02">
<li>フォントサイズ70％で表示したい文字</li>
</ul>
--------------------------------------------------------

2315421さんの問題の解決になりましたでしょうか。

回答No.1

noname#158634

IDは「一意」だからダメです。
というか違うタグでスタイルも異なるのに同じ識別子を付けようとするのがおかしいです。