現在、Myspaceのデザインを修正しています。
Myspaceは、HTML上の特定の箇所を修正できるため、その中にCSSを記述しています。
レイアウトとして使われているtableタグにはID属性が設定されているため、ある程度は思い通りになるのですが、どうしてもうまくいかない場合があります。
具体的には、デフォルトで設定されているCSSを上書きする目的で"!important"を適用しても、反映されない事があるのです。
例えば、
<table id="abc">
<tr><td> </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. 元々記述されているスタイルがわからないと対策ができません。table#abcとはMySpaceでいうと具体的にどのIDですか。
「CSSの優先順位~CSSテクニック~」にわかりやすく解説されています。
2.「属性セレクタ」という指定方法です。「CSS 概説 | セレクタ」によると「属性セレクタ p[id="URI"] よりも p#URI の方が優先します」だそうです。
1. 元々記述されているスタイルがわからないと対策ができません。table#abcとはMySpaceでいうと具体的にどのIDですか。
「CSSの優先順位~CSSテクニック~」にわかりやすく解説されています。
2.「属性セレクタ」という指定方法です。「CSS 概説 | セレクタ」によると「属性セレクタ p[id="URI"] よりも p#URI の方が優先します」だそうです。
2.について、ありがとうございました。欲しかった情報です。
1.について、
具体的には
Firefox3.5、IE8で確認しました。「IEは反映されない」も再現しました。
結論からいうとIEはtable[id="musicJVNav"]という属性セレクタを用いたidの指定に対応してないようでした。
ここは素直にIDセレクタを用いて、
#musicJVNav {display:none;} #leftNav li a {color:pink;}
としてみてはいかがですか。table#musicJVNavとしてもOKです。
この指定方法はMySpace側の記述と切り口が異なるので!importantが要りません(保険としてつけておいてもいいでしょう)。
うーん、やはり難しいようです。
ユーザー側で無理矢理スタイルシートを使うと、本来正しく無い場所(※)にCSSが<style>
2.について、ありがとうございました。欲しかった情報です。
1.について、
具体的には
(※tableごと非表示にしたい)
と
(※このulの中にあるaタグの色を変更したい)
のタグになります。
この二つだけは、
table[id="musicJVNav"]
ul[id=leftNav] li a
のようにして、なんとかFirefoxのみ意図したデザインになりました。
お手数をおかけします。宜しくお願いいたします。