- ベストアンサー
style属性を使って擬似クラスを表現することは可能ですか？
CSSの読み込み方には3通りあります。 1)<head>～</head>内にstyle要素をマークアップする。 2)外部CSSファイルをHTMLに読み込ませる。 3)任意のタグにstyle属性を指定する。 そこで質問なのですが、3)のstyle属性で擬似クラスを指定する事は可能でしょうか？ 1)と2)の方法であれば、 div a:link { color : #fff ; background : blue ;} div a:visited { color : #fff ; background : purple ;} div a:hover { color : #fff ; background : aqua ;} div a:active { color : #fff ; background : purple ;} のように指定すればよいだけですが、 3)の方法、つまりstyle属性を用いて擬似クラスの指定の仕方が分かりません。 宜しくお願いします。
- doublebeefcake
- お礼率74% (26/35)
- CSS
- 回答数3
- ありがとう数2
- みんなの回答 （3）
- 専門家の回答
質問者が選んだベストアンサー
おそらくCSSだけではできないのでは。 http://www.kanzaki.com/book/html/spec-nofollow.html#inline-style こちらに少し古い時点での草案が載っていますが、この <a href="http://foo.com" style="{color: blue} :hover {color: green}"> と言う書式をIE6とFirefox1.5で試してみたけど駄目でした。 javascriptとかで処理するんじゃないですかね。必要な人は。
その他の回答 (2)
- mognol_n
- ベストアンサー率61% (8/13)
結論から言うと、タグのstyle属性では擬似クラスの指定は不可能だったと思います。 質問者さんが何故そこまでstyle属性にこだわるのかがわかりませんが、 例えば複数のaタグにそれぞれ別々の内容の擬似クラスを指定したい場合は、 class属性やid属性を用いて指定するのが一般的ではないでしょうか？
お礼
普段は外部スタイルシートでclass属性,id属性を使って指定していますが、style属性による指定に関する今回の疑問が解決してすっきりしました。 ありがとうございました。
- yambejp
- ベストアンサー率51% (3827/7415)
なにがしたいかいまいちわかりませんが、 こういうコトでしょうか？ <html> <head> <style type="text/css"> .hidden{ display:none; } </style> <script language=javascript> function redhidden(){ var divs=document.getElementsByTagName("*"); for (var i=0;i<divs.length;i++){ if(divs[i].style.color=="#ff0000") divs[i].className="hidden"; } } </script> </head> <body> <div style="color:#ff0000;">aaa</div> <div style="color:#00ff00;">bbb</div> <div style="color:#0000ff;">ccc</div> <div style="color:#ff0000;">ddd</div> <form> <input type="button" value="赤い段落を隠す" onClick="redhidden()"> </form> <body> </html>
補足
説明不足ですみません。 質問の趣旨は、HTML文書中にstyle属性を記述して、その値に擬似クラスを指定する事は可能かどうか。 可能な場合は、どのような記述をすればよいのかという意味です。 例えば、HTML文中にリンクテキストを記述します。 例） <div> <a href="URI" title="リンクテキスト">リンクテキスト</a> </div> ブラウザで表示すると、画面上に「リンクテキスト」の文字が表示されます。 このリンクテキストにCSSで装飾を施すとします。 CSSの適用方法は、【style属性】を用いることとします。 従って、外部ファイルとしてCSSを読み込む方法は今回は考慮しない事とします。 → <link rel="stylesheet" type="text/css" href="style.css" /> また、style要素による装飾も考慮しない事とします。 ↓ <head> <title>...</title> <style> a:hover { background : silver ; } </style> </head> ＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿ あくまで今回は【style属性】による装飾に限定します。 【style属性】を用いて、仮にリンクテキストの背景を黄色にしたいと思います。 ▼source <div> <a href="URI" title="リンクテキスト" style="background : yellow ;">リンクテキスト</a> </div> 背景は黄色になりました。 では、このリンクテキストに、マウスカーソルが重なっている状態のときにだけ背景をsilverにするにはどうしたらよいか。 ※ただし、JavaScriptを使用せず、CSSのみ用いることとする。 この場合に用いるのが、CSSの擬似クラスだと思います。 しかし、通常の装飾（単に背景を黄色にするなどの）はstyle属性で指定できても、擬似クラス（a:hover,a:active等）をstyle属性の値として指定することが可能かどうか疑問に思いまして、今回質問させていただきました。宜しくお願いします。
お礼
私も <a href="URI" style=":hover : silver ;">リンク</a> とか <a href="URI" style="a:hover : silver ;">リンク</a> など試してみたのですが駄目でした。 普段は外部スタイルシートで全て済ましているので、style要素による指定はしていませんが、cssの復習をしている時に、ふとこの点が疑問に思い、質問させていただきました。 問題点に確信がもてました。ありがとうございました。