HTML,CSS,PHP,ワードプレスカスタマイズ 技術情報資料

クラス の html タグ (要素) にだけ スタイルを設定したい

クラス の 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 out text

スポンサーリンク

スポンサーリンク

カテゴリー