クラス の html タグ (要素) にだけ スタイルを設定したい
これって、結構わすれすので記録しておきます。
つまり、class名 abc と指定した html タグ にだけ影響を及ぼしたい場合だな。
<a href=”~”>テキストリンク</a>
こういうのをマウスオーバーでリバースさせたいとかってとき。
<a href=”~” class=”tlink” >テキストリンク</a>
<style>
a.tlink{
color:#00f;
}
a:hover.tlink{
color:#00c;
}
</style>
書き方は、
タグ(セレクタ).クラス名
継承
特定タグの中のタグにだけスタイルを設定したい場合。タグ.クラス タグ
例えば、特定の div 内の タグにだけ影響を及ぼしたい。
<div class="dtext"> <p>文章1</p> <p>文章2</p> </div> <style> div.dtext p{ color:#c00; font-weight:bold; } </style>
入れ子の順で空白を区切りにして タグ名。
例2、
<span class="spanclass"> <p>span in text1</p> <p>span in text2</p> </span> <p>span out text</p> <style> p { color:#00f; } span.spanclass p{ color:#c00; } </style>
これの結果は、こうなる
span in text1
span in text2
span in text2
span out text
スポンサーリンク