• ベストアンサー

複数クラス指定に対応しているブラウザーのバージョン

<div class="className1 className2">中身</div> の様に、一つの要素に複数のクラスを指定できると思いますが、この記述に対応しているブラウザーのバージョンを知りたく思います。 バージョン5以降のブラウザーで汎用的に使えたら嬉しいのですが、実際はどうなのでしょうか。教えてください。

  • twk
  • お礼率36% (51/140)
  • CSS
  • 回答数1
  • ありがとう数2

質問者が選んだベストアンサー

  • ベストアンサー
  • BLUEPIXY
  • ベストアンサー率50% (3003/5914)
回答No.1

私は、IE6を使っている者ですが、 <div class="className1 className2" onclick="alert(this.className)">中身</div> の様にして試してみた所、 classNameとして"className1 className2"が表示されるので、複数のクラスというより、空白を含んだクラス名のような気がします。 なので、クラスを複数割り当てる目的で、複数のクラスの指定が上記の様にはできないと思うのですが 勘違いだったらすみません。

twk
質問者

お礼

その後改めて調べてみたところこんなページを見つけました。 http://www.pixelsurge.com/experiment/multiplestyles.htm では。

twk
質問者

補足

さっそくの回答いただいたのに返事が遅くなってすみません。下記の様なhtmlで、IE6はちゃんと適用されているようですがいかがでしょうか。 <body> <style> .test1{ color:red; } .test2{ background-color:blue; } </style> <p class="test1 test2">ABCDE</p> </body>

  1. カテゴリ
  2. [技術者向] コンピューター
  3. プログラミング・開発
  4. CSS

関連するQ&A

  • 「CSSで1つの要素に複数のクラスを指定する」に対応したブラウザは？

    恥ずかしながら、最近ようやく『同一idは一つのページ内で複数用いるべきではない』の意図するところが分かってきました。これまで、この事を理解していなかったがために、 aaa ←文字色：青、背景色：黄 bbb ←文字色：緑、背景色：黄 ccc ←文字色：青、背景色：赤 ddd ←文字色：緑、背景色：赤 といった表現を実現するために、 ---CSSファイル内の記述--- .blue{color:blue;} .green{color:green;} #bg_yellow{background-color:yellow;} #bg_red{background-color:red;} ---HTMLファイル内の記述---- <div class="blue" id="bg_yellow">aaa</div> <div class="green" id="bg_yellow">bbb</div> <div class="blue" id="bg_red">ccc</div> <div class="green" id="bg_red">ddd</div> というようなソースをよく書いておりました。この場合、idの意味を理解して、解決するには、例えば下の3通りの方法があるように思います。 (1)IDを4つ作成し、1つずつ適用する ---CSSファイル内の記述--- #blue_bg_yellow{color:blue;background-color:yellow;} #green_bg_yellow{color:green;background-color:yellow;} #blue_bg_red{color:blue;background-color:red;} #green_bg_red{color:green;background-color:red;} ---HTMLファイル内の記述---- <div id="blue_bg_yellow">aaa</div> <div id="green_bg_yellow">bbb</div> <div id="blue_bg_red">ccc</div> <div id="green_bg_red">ddd</div> (2)クラスを4つ作成し、1つずつ適用する ---CSSファイル内の記述--- (1)の『#』を『.』にする ---HTMLファイル内の記述---- (1)の『id』を『class』にする (3)クラスを4つ作成し、2つずつ適用する ---CSSファイル内の記述--- .blue{color:blue;} .green{color:green;} .bg_yellow{background-color:yellow;} .bg_red{background-color:red;} ---HTMLファイル内の記述---- <div class="blue bg_yellow">aaa</div> <div class="green bg_yellow">bbb</div> <div class="blue bg_red">ccc</div> <div class="green bg_red">ddd</div> 今回の例では、数も少なく、どれでもそれほど変わらない感じですが、この(3)の書き方には、どれほどのブラウザが対応しているのでしょうか？ 個人的に使用しております ・Firefox 2.0 ・Internet Explorer 6.0 では動作するのですが、それ以外のブラウザでの動作に関してご存知の方は、ぜひ教えて下さい。(特にMacは持っていませんので、Macのブラウザの情報は非常にありがたいです) ある程度のブラウザで動作するようなら、 .b,strong{font-weight:bold;} .i,em{font-style:italic;} .u,ins{text-decoration:underline;} .s,del{text-decoration:line-through;} .u_s{text-decoration:underline line-through;} のように、よく使いそうな表現をまとめたスタイルシートを作ろうかな、などと考えております。打ち消しながら下線引く事なんかはまずないとは思いますが、これは例えばの話です。 長文を最後までお読みいただきありがとうございました。

    • 締切済み
    • CSS
  • 指定したidやclass以外の要素を指定するには

    cssで特定のidやclassを持った要素を指定することは常識ですが 指定したidやclass以外の要素を指定する方法はありますか？ 例えば#mainというidを持ったdiv要素を除いた全てのdiv要素を指定するなど。 本来は共通のクラスを割り当てるのが正しいやり方だと思いますが、、、

    • ベストアンサー
    • CSS
  • CSSのクラス指定について

    CSSのクラス指定で質問させていただきます。 下記の条件で「a-クラスのついたDIV」の中で、 なおかつ一番初めに表示される[a-]の背景色だけ「赤色」にする方法を教えてください。 「a-1」「a-2」「a-3」はそれぞれ時間によって消えたりし、[x]が挿入されたりします。 以上のように条件が変わっても、常にclass=「a-」のついた一番上のDIVの背景は赤色になります。 HTML------------------- <div class="wrapper"> <div class="x"></div> <div class="a-1"></div> <div class="a-2"></div> <div class="a-3"></div> </div> css----------------------- [class^="a-"]{}; nth-of-typeを使って指定できると思うのですが、いまいちうまくできません＞＜ ぞうぞよろしくお願いします。

    • ベストアンサー
    • CSS
  • 共通したクラス名を持つ複数のタグのIDを取得したい

    共通したクラス名を持つ複数のタグのIDを取得したい <div class="classA" id="id1">aaa</div> <div class="classB" id="id2">bbb</div> <div class="classA" id="id3">ccc</div> となっているHTMLファイルからjqueryで要素を取得するプログラムを作成しています この時、class="classA"となっているID(id1とid3)とテキスト(aaaとccc)をjqueryで取得する方法を考えています jqueryで、 var elements = $(".classA"); でclass名がclassAの要素の数を取得したり、 var id = $(".classA").attr("id"); でidを指定すれば取得することもできました しかし、これはjqueryがあらかじ

  • HTML内のクラス名の内容を取り出したい

    こんにちは。 <div id ="content"> 　<p class="txt"> 　　内容 　</p> </div> と言う内容のHTMLから、クラス名txtの文章を取り出したいのです。className、getElementsByClassNameなどを見てみましたが、よく意味が分かりません。 そこでなのですが、クラス名txtの文章を取り出す良い手段か、className、getElementsByClassNameについて教えていただけませんか？ よろしくお願いします。

  • Javascriptでページ内の任意クラスを非表示

    Javascriptで、ページ内に点在する任意のクラスを非表示にしたいと思います。 こんなことが可能でしょうか？ 条件： １．class="text"というspanなりdivなりがページ内に複数存在します。指定しているスタイルはフォントサイズやフォントカラーです。 ２．そのクラスが指定された要素の中で、テキストで「非表示」となっている要素のみ非表示にしたいと思います。 　例：<span class="text">非表示にしたい</span>、<div class="text">これは非表示です</div> 　このように「非表示」という文字が含まれています。 ３．「非表示」というテキストが含まれている要素にはclass="text"以外にclassもidもふられていないです。 ４．jQueryやJavascriptは使えますが、あらかじめ指定要素にidやclassを付加しておくということができません。何らかの方法でページ読み込み後に検索し、探し出さないといけないのです。 案： 素人の私が考えた方法では、「非表示」という文字がマッチする「class="text"」要素を何らかの方法で検索し、その要素に対して「id="hide"」などを追加して、そのidを非表示処理するという方法です。 上記案をコード化できますか？ また、ほかにもっと簡潔にできるよという方法はありますか？ かなりの無理難題のような気がしますが、もしできるようであればよろしくお願いします。

  • onmouseover="this.className=をjsファイルにまとめて、指定する場所はid=menu1,2～....かclass=menuで統一したい

    <div class="font1 bor1" onmouseover="this.className=this.className+' bgcol txcol'" onmouseout="this.className='font1 bor1'"> というものがあったとしてこれを <div id="menu1・・・２・・・">だけにして onmouseover=～をjsに略記できるようにしたいのですが 何かいい手はありませんか？ idで指定できる版のほかに classで指定できる版があるとうれしいです。classだと難しいでしょうか？ また、こちらももしできればでいいのですが、this.classNameを 指定IDのclassName等もできるのでしょうか？ 質問に不足があれば答えられる範囲で答えます。よろしくお願いします。

  • スタイルシートのブラウザ対応状況について

    font-sizeの指定をしたいのですが、スタイルシートで困っています。 インラインで<div style="font-size:10px">AA</div>と記述すると、 きちんと表示してくれるのですが、 <Head>内にclassで記述したり、外部スタイルシートを用いると、 WINDOWSのＮＮ4.0やＮＮ4.75では、全く反応してくれません。 IE4.0以降やＮＮ6では、きちんと表示されるのですが。。。 いろんな本を読みましたが、どの本もＮＮ4.0以降なら、 外部スタイルシートも使えるようなことを書いてあったので、 困っています。 誰か詳しい方がおられたら、教えてください。

    • 締切済み
    • CGI
  • CSSでクラス名を指定してもうまくいかない

    下記URLのサイトを参考にして「Google+1ボタン」を設置しようとしています。 https://developers.google.com/+/web/+1button/?hl=ja とりあえずサイト上には設置できたのですが、今度はこの「Google+1ボタン」を自分が設置したい場所に貼り付けるために、CSSで指定しようと思いました。 ちなみに、取得したコードは以下のようになっています。 <!-- +1 ボタン を表示したい位置に次のタグを貼り付けてください。 --> <div class="g-plusone" data-size="medium"></div> <!-- 最後の +1 ボタン タグの後に次のタグを貼り付けてください。 --> <script type="text/javascript"> window.___gcfg = {lang: 'ja'}; (function() { var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true; po.src = 'https://apis.google.com/js/platform.js'; var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s); })(); </script> コードは上記のようになっています。 class="g-plusone" となっていますので、このままこれをクラス名としてCSSに記述しても適用されません。 そこで、これにさらに<div>タグで囲んで、この<div>にクラスを付ければできると思い <div class=”sample”><div class="g-plusone" data-size="medium"></div></div> として、sampleに対してスタイルを指定してみたところ、うまくできました。 しかし、できればこのようなことはせず、"g-plusone"というクラス名が最初から付いているわけですから、これを利用できないかと考えています。 もし、できるのであれば、そのやり方を教えてください。

    • ベストアンサー
    • CSS
  • 継承したクラス側のクラス名の取得

    C#3.5を使用しています。 BaseClassはStackTraceを使ってクラス名を取得できるメソッドを持っています。 それを継承したDerivedClass側でそのクラス名「DerivedClass」を取得したいのですが、 次のようなやり方では「BaseClass」が取得されてしまいます・・・ あくまでBaseClass側に記述したメソッドのままで、DerivedClass側のクラス名を取得するには どのようにしたら良いのでしょうか？ public class BaseClass { public string className; public string ClassName { get { if (className == null) { StackTrace st = new StackTrace(false); StackFrame sf = st.GetFrame(0); className = sf.GetMethod().ReflectedType.Name; } return className; } set { className = value; } } } public class DerivedClass : BaseClass { } var c = new DerivedClass(); MessageBox.Show(c.ClassName);// BaseClassと表示される

注目のQ&A

カテゴリ

専門家に質問してみよう

職業から探して質問する

あなたにピッタリな商品が見つかる！ OKWAVEセレクト

質問する