CSSで2つのクラス指定は?

[上に] [前に] [次に]
JO- 2000/02/14(月) 18:52:05
CSSで2つのクラスを同時に指定出来たら、
と思うのですが出来ますでしょうか?

.one { font-size: 11pt; }
.two { color: red; }

<SPAN CLASS="???で2つ指定したい">
このCSSの例は一つにすれば済むことですが、
2つ同時に指定出来る方法を探しています。
よろしくお願いします。

EMI 2000/02/14(月) 19:05:57
<span class="one two">〜</span>
これで、OK。(クラス名の間に半角スペース)

ちなみに、oneとtwoの両方のクラスを持つ要素に対するスタイルは、
.one.two{ font-weight: bold; }
みたいに指定できます。

JO- 2000/02/14(月) 20:44:31
><span class="one two">〜</span>
なるほど、IE5(WIN98)で動作しました。
そんな記述方法があるとは、とても勉強になります。

ただ、
IE4、NN4.04(WIN98)だと何も起こりませんでした。
最初に書いておけば良かったのですが、IE4以上、
NN4以上で何かいい方法はないでしょうか?

EMI 2000/02/15(火) 09:59:03
あれ?IE4でできませんでしたか?
とりあえず、苦肉の策としてはこんなの。(^^;
<span class="one"><span class="two">〜</span></span>
一応、上のスタイル指定も有効です。

LoveSong 2000/02/15(火) 15:42:55
CSSクラスを複数指定できるのはIE5からの対応ですので、
IE4では無理みたいですね(^^;;

EMI 2000/02/15(火) 16:18:23
う〜む、そうだったのか。
‥‥‥って、前IE4で前者の方法がうまくいかなくて後者の方法を試したような記憶があるなぁ。(^^;

JO- 2000/02/15(火) 16:41:35
[[解決]]
> CSSクラスを複数指定できるのはIE5からの対応ですので、
なるほど、残念ですがしょうがないですね。

> <span class="one"><span class="two">〜</span></span>
これがちょっとスマートじゃないな〜(^^;;;、と思って質問して
みたんですが、IE4、NN4を考えてこれを使おうと思います。

EMIさん、LoveSongさん、ありがとうございました。

EMI 2000/02/15(火) 17:00:53
>> <span class="one"><span class="two">〜</span></span>
>これがちょっとスマートじゃないな〜(^^;;;、と思って質問して
俺もそう思います。CSS1の仕様なのになぁ。
まぁ、サポートしてない以上、あきらめるしかないか。

通りすがり1号 2000/02/15(火) 22:27:52
すいません。
解決しているスレッドなんですけど、
ちょっと疑問に思ったので質問させてください。

id属性は基本的に1対1の対応ですよね?
で、classは基本的に1対複数の対応だと思ってたんだけど、
複数対複数(多重継承?)もOKって事なんですか?

あと、もし複数対複数でOKならば、
それぞれのclassが同じスタイルを別の値で定義していたら、
優先順位はどうなるのでしょうか?
例:
.a {color: #ff0000;}
.b {color: #0000ff;}
だったときに
<span class="a b">test</span>
は、あとで定義した方が優先されるって事ですか?

idとclassがぶつかるとidで定義したスタイル優先で、
タグが入れ子になってる場合は内側のスタイル優先ですけど、、、

EMI 2000/02/15(火) 23:41:26
CSSの場合、定義が重複したら「カスケーディング」というルールに則って解決されます。
カスケーディングに関しては、他に詳しいサイトがあると思うので探してみてください。
ところで、一応この場合はbの指定が優先されたような。

コウノトリ 2000/02/16(水) 00:45:34
> <span class="one"><span class="two">〜</span></span>
これがちょっとスマートじゃないな〜(^^;;;、と思って質問して
みたんですが、IE4、NN4を考えてこれを使おうと思います。

おせっかいかもしれないけど、HTML側じゃなくて、CSSの方で対処した方がほうがいいと思いますよ。
理由は自明。

EMI 2000/02/16(水) 01:17:40
>おせっかいかもしれないけど、HTML側じゃなくて、CSSの方で対処した方がほうがいいと思いますよ。
たとえば、こういうことでしょうか?

<style type="text/css">
<!--
  .one-two { font-size: 11pt; color: red; }
-->
</style>

‥‥‥う〜ん、あまりスマートじゃないなぁ。

コウノトリ 2000/02/16(水) 18:55:06
>たとえば、こういうことでしょうか?

いや、HTMLの方は <span class="one two">〜</span> にしておいて、
CSSの方でIE4でも5でも思った通りに表示されるように手を加えるということです。
やがてIE4を無視してもよかろうという状況になったときでもHTMLに手を加えないでいいから。

EMI 2000/02/16(水) 19:13:55
なるほど。
でも、それでどうにかする手段がありますか?
><span class="one two">〜</span>
と指定した場合、IE4ではoneが有効になるのかtwoが有効になるのか両方無効になるのかは覚えてませんが、いずれにしてもCSSだけで対応できるとは思えませんが。
両方無効になる場合は論外として、片方だけが有効になる場合にその有効になる片方に両方のスタイルを記述するとしても、それぞれのクラスを単独で使用する場合に困りますし。

でも、何か方法あるのかなぁ?
とりあえず、俺の頭じゃ何も思いつきませんが。

JO- 2000/02/16(水) 19:50:13
>でも、それでどうにかする手段がありますか?
この方法があれば知りたいです。…最初の質問ですが (^^;;;

>><span class="one two">〜</span>
両方無効になりました、IE4(IE5共存)、WIN98。
具体的にやろうとしている事は、フリーで配布されている掲示板の
改造です。書き込み者がフォントサイズ、カラーを選択するのです
が、その指定をCSSのクラス指定でやりたい、と。
で、サイズが5種類、カラーが10種類から選択とした時、それぞれ
一緒にクラスを作成してやるとクラスの数がちょっと多いので…。
# 数は多くてもその方がスマート、との見方もあるのかな?
それで、サイズ用のクラスとカラー用のクラスを作っておき、2つ
同時に指定出来れば!、と思ったのです。15ケで済むため。

EMI 2000/02/16(水) 20:02:52
>>><span class="one two">〜</span>
>両方無効になりました、IE4(IE5共存)、WIN98。
両方無効にされるんなら、CSS側での対処は絶対に不可能ですね。
あきらめて
><span class="one"><span class="two">〜</span></span>
で、いくしかなさそうだ。

>で、サイズが5種類、カラーが10種類から選択とした時、それぞれ
>一緒にクラスを作成してやるとクラスの数がちょっと多いので…。
># 数は多くてもその方がスマート、との見方もあるのかな?
>それで、サイズ用のクラスとカラー用のクラスを作っておき、2つ
>同時に指定出来れば!、と思ったのです。15ケで済むため。
分けた方が、スマートだし自然でしょう。
全く別の属性ですから。

通りすがり1号 2000/02/16(水) 23:06:06
あれからちょっと調べてみました。

CSS1では、同じウェイトを持つクラスは後で定義された方が優先されるようですね。
[参考]
http://www.w3.org/TR/REC-CSS1#cascading-order
の規則5

ただ、
>.one.two{ font-weight: bold; }
のような指定は正しくないように思います。
[参考]
http://www.w3.org/TR/REC-CSS1#class-as-selector

EMI 2000/02/18(金) 16:47:48
>>.one.two{ font-weight: bold; }
>のような指定は正しくないように思います。
>[参考]
>http://www.w3.org/TR/REC-CSS1#class-as-selector
CSS1じゃ、できなかったのか。失礼。
CSS2ならば合法的なんですが、CSS1とCSS2の仕様を取り違えていたようです。
http://www.w3.org/TR/REC-CSS2/selector.html#class-html

コウノトリ 2000/02/18(金) 17:50:53
なるほど。CSSだけでIE4と5の両方に対応させるのは無理でしたか。
でも、この程度のケースなら、私だったら、HTMLに手を加えて無理矢理実現することと、
IE4で若干スタイルに差異がでることを天秤に掛けてみて、
最終的にはIE4ユーザに目をつぶってもらう方を選びますね。
私見ですが。

[上に] [前に] [次に]