CSSについて質問です。


<div id='head' class='pic1'>
というタグがあるとします。

このタグをCSS上で選択する際にセレクタとして'div#head.pic1'という記述を使用しました。(他のページで'div#head.picX'と続けて使用していくため)
ところが、IE6ですとこのセレクタが利かないのです(FF,IE7はOK)
現時点ではちょっと気持ち悪いですが、単に'.pic1'と記述することで回避している状況です。

これって、バグなのでしょうか?
それとも、正しいセレクタの使用方法があるのでしょうか?

詳しい方、どなたかご教授いただけますと助かります。

回答の条件
  • 1人3回まで
  • 登録:
  • 終了:2008/06/22 20:40:02
※ 有料アンケート・ポイント付き質問機能は2023年2月28日に終了しました。

回答3件)

id:hatebu_music No.1

回答回数61ベストアンサー獲得回数2

ポイント27pt

div#head.picX を div#head .picX のように半角で離して書いてみてもダメですか?

↓このバグかもしれない。

http://cssbug.at.infoseek.co.jp/detail/winie/b055.html

id:satoshionoda

ダメでした(涙)

ただ、このバグの存在そのものを知らなかったので勉強になりました。

ありがとうございます。

2008/06/15 23:40:20
id:ahirusan No.2

回答回数229ベストアンサー獲得回数3

ポイント27pt

IE6が最新のCSSに対応していないからだと重いマウス。

id:satoshionoda

とどのつまり、そういうことなんですかねぇ…。

ちなみに、なぜかIE5.5では表示してくれます。

2008/06/15 23:45:20
id:ftns No.3

回答回数153ベストアンサー獲得回数16

ポイント26pt

CSS3では、<要素名>#<ID>.<クラス名>というセレクタは定義されていませんので、

IE6では動作しないのだと思われます。なお将来のCSSでこの形が定義されるか

どうかまではわかりません。。

http://www.w3.org/TR/css3-selectors/#id-selectors

id:satoshionoda

いただいた、URLの

4. Selector syntaxで

A selector is a chain of one or more sequences of simple selectors separated by combinators.

A sequence of simple selectors is a chain of simple selectors that are not separated by a combinator.

とありますので、セレクタは繋げてしまって問題ないのではないでしょうか?

ちなみに、当該のコード一式はW3CのValidatorにも通りました。

2008/06/15 23:44:41
  • id:pahoo
    ご質問の例ですと、なぜ id='head' が必要なのか分かりません。
    divに対して class を指定しているのであれば、class='pic1', class="picX" ‥‥と定義していくだけで一意になりますから、それで十分に思えます。
  • id:satoshionoda
    pic1というclassが他のところでも使いまわされているのです。

    実際の実装は違うのですが
    <div id='head' class='pic1'>
    <div id='foot' class='pic1'>
    という具合です。

    共通の内容をclassで定義しつつ、配置場所ごとの微妙な差異はidで吸収しようとしています。
    CSSの意義的には問題ないはずですが、どうなのでしょう?
  • id:tezcello
    > 共通の内容をclassで定義しつつ、配置場所ごとの微妙な差異はidで吸収しようとしています。
    > CSSの意義的には問題ないはずですが、どうなのでしょう?
    実際には使い回し出来ないスタイルを使い回そうとしているな気がするのですが...
    微妙に違うのなら、それはもう別のスタイルでしょうから。
    「意味的」には間違いではないように感じますが「意義的」にはチョッと疑問があります。

  • id:satoshionoda
    質問者です。

    > 微妙に違うのなら、それはもう別のスタイルでしょうから。
    個人的な見解ですが、微妙に違うものから共通する内容を抽象化し、使いまわしのできるクラスを作ることがCSS、さらには「クラス」という概念のある言語全般における醍醐味のひとつだと思っています。
    そんなポリシーもあって、敢えて「意義的」という言葉を使わせてもらいました。

    まぁ、実装が追いついていなければ、妥協するしかないのですけどね。
  • id:Mars
    簡単なサンプルを作って
    http://browsershots.org/
    こちらで確認してみましたが
    要素#ID.CLASS{~}
    要素.CLASS#ID{~}
    どちらもIE5.5,IE6,IE7で問題ないようでした。
    セレクタ以外の別の要因(バグ)でIE6だけ適用されていない可能性はありませんかね?
  • id:pahoo
    > 共通の内容をclassで定義しつつ、配置場所ごとの微妙な差異はidで吸収しようとしています。
    > CSSの意義的には問題ないはずですが、どうなのでしょう?

    違反ということにはならないと思いますが、子孫セレクタ(http://www.seo-equation.com/html/css/selector#ref3)を使った方がスマートではないでしょうか。

この質問への反応(ブックマークコメント)

「あの人に答えてほしい」「この質問はあの人が答えられそう」というときに、回答リクエストを送ってみてましょう。

これ以上回答リクエストを送信することはできません。制限について

回答リクエストを送信したユーザーはいません