CSSでの優先度について教えてください。


現在、Myspaceのデザインを修正しています。
Myspaceは、HTML上の特定の箇所を修正できるため、その中にCSSを記述しています。

レイアウトとして使われているtableタグにはID属性が設定されているため、ある程度は思い通りになるのですが、どうしてもうまくいかない場合があります。

具体的には、デフォルトで設定されているCSSを上書きする目的で"!important"を適用しても、反映されない事があるのです。

例えば、
<table id="abc">
<tr><td>&nbsp;</td></tr>
</table>
のようなタグの場合、
table#abc
{background-color:#000000!important;}
と設定しても反映されません。
tableタグの中でstyle指定をしている訳ではないのに、なぜかうまくいきません。

しかし、海外のサイトを参照して分かったのは
table[id=abc]
{background-color:#000000}
のように記述すると、Firefoxは反映されます。IEは反映されません。


そこで質問なのですが、
1. どうすれば、!importantより優先度の高い記述ができるでしょうか?
2. この、[id=abc]という設定方法について詳しく教えてください。
(うまく検索ができないため)

宜しくお願い致します。

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

ベストアンサー

id:Cherenkov No.1

回答回数1504ベストアンサー獲得回数493

ポイント100pt

1. 元々記述されているスタイルがわからないと対策ができません。table#abcとはMySpaceでいうと具体的にどのIDですか。

「CSSの優先順位~CSSテクニック~」にわかりやすく解説されています。



2.「属性セレクタ」という指定方法です。「CSS 概説 | セレクタ」によると「属性セレクタ p[id="URI"] よりも p#URI の方が優先します」だそうです。



参考

id:rimk

2.について、ありがとうございました。欲しかった情報です。

1.について、

具体的には

(※tableごと非表示にしたい)

    (※このulの中にあるaタグの色を変更したい)

    のタグになります。

    この二つだけは、

    table[id="musicJVNav"]

    ul[id=leftNav] li a

    のようにして、なんとかFirefoxのみ意図したデザインになりました。

    お手数をおかけします。宜しくお願いいたします。

2009/07/06 21:44:56

その他の回答1件)

id:Cherenkov No.1

回答回数1504ベストアンサー獲得回数493ここでベストアンサー

ポイント100pt

1. 元々記述されているスタイルがわからないと対策ができません。table#abcとはMySpaceでいうと具体的にどのIDですか。

「CSSの優先順位~CSSテクニック~」にわかりやすく解説されています。



2.「属性セレクタ」という指定方法です。「CSS 概説 | セレクタ」によると「属性セレクタ p[id="URI"] よりも p#URI の方が優先します」だそうです。



参考

id:rimk

2.について、ありがとうございました。欲しかった情報です。

1.について、

具体的には

(※tableごと非表示にしたい)

    (※このulの中にあるaタグの色を変更したい)

    のタグになります。

    この二つだけは、

    table[id="musicJVNav"]

    ul[id=leftNav] li a

    のようにして、なんとかFirefoxのみ意図したデザインになりました。

    お手数をおかけします。宜しくお願いいたします。

2009/07/06 21:44:56
id:Cherenkov No.2

回答回数1504ベストアンサー獲得回数493

ポイント35pt

Firefox3.5、IE8で確認しました。「IEは反映されない」も再現しました。

結論からいうとIEはtable[id="musicJVNav"]という属性セレクタを用いたidの指定に対応してないようでした。

ここは素直にIDセレクタを用いて、

#musicJVNav  {display:none;}
#leftNav li a {color:pink;}

としてみてはいかがですか。table#musicJVNavとしてもOKです。

この指定方法はMySpace側の記述と切り口が異なるので!importantが要りません(保険としてつけておいてもいいでしょう)。

id:rimk

うーん、やはり難しいようです。

ユーザー側で無理矢理スタイルシートを使うと、本来正しく無い場所(※)にCSSが<style>2009/07/09 00:16:25

  • id:rimk
    なぜか一部なくなってしまったので、コメントでもう一度お伝えします。

    <ul id="leftNav">
    (※tableごと非表示にしたい)

    <table id="musicJVNav" border="0" cellpadding="0" cellspacing="0">
    (※このulの中にあるaタグの色を変更したい)

    のタグになります。
  • id:rimk
    逆でした。

    <ul id="leftNav">
    (※このulの中にあるaタグの色を変更したい)


    <table id="musicJVNav" border="0" cellpadding="0" cellspacing="0">
    (※tableごと非表示にしたい)

    すみません。
  • id:Cherenkov
    各ブラウザのCSSセレクタ対応を調べるときに
    http://www.css3.info/selectors-test/test.html
    が便利です。

    ##ちょっとだけ試行錯誤してみたところdiv[id=topnav] aのようにすればIEでも指定できました。IEはul、liなどのタグの属性セレクタはサポートしていなくて、少なくともdivタグはサポートしているようです。
  • id:rimk
    またもや、返信が消えてしまいました。

    うーん、やはり難しいようです。
    ユーザー側で無理矢理スタイルシートを使うと、本来正しく無い場所(※)にCSSがstyleから始まり記述されてしまうため、IEで正しく表示されないのかもしれません。

    ※このタグ以下に挿入されてしまいます。
    <td valign="top" align="left" width="435" bgcolor="ffffff" style="word-wrap:break-word">
  • id:Cherenkov
    アーティストアカウントを取ってカスタマイズがどんなのか体験してみました。

    IDセレクタに必要な#が使えないようですね。つまりIDセレクタと属性セレクタのid属性を使った指定方法が使えないので、IEがサポートしているセレクタを組み合わせて指定するしか方法がありません。

    body>div>table
    などとしてやってみましたがIEが対応しておらず。
    次にbody div tableを試そうとしてみたかったのですが、MySpaceのサービスがばぐったのか変更を受け付けなくなったのであとでやってみます。
  • id:Cherenkov
    .profileWidth a,.mailCountNav {color:pink!important;}
    .navbar {display:none!important;}


    これでどうでしょうか。.profileWidth a,.mailCountNavはメニューの文字の色。
    非表示にしたいtableのid=musicJVNavですが全体を消すには無理みたいです。なので左についている画像だけnavbarというclassが設定されていたのでそれを消しました。
    この設定はIE用として書き、併せてFirefoxだけ適用されたCSSも書いておくのが最善だとおもいます。


    IEも悪いしMySpaceもひどいことが良くわかりました。
  • id:rimk
    すみません、いろいろとご丁寧にありがとうございます。。

    期待以上のコメント、ご回答でした。

    本当にありがとうございます。

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

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

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

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