span classでの指定文字の色の変更について

質問

HTML＆CSS初心者です。アドバイスよろしくお願いします。
既定で
<span class="kyoumitext2">スポーツ：</span>
<span class="kyoumitext2">読書：</span>
とあるとすると、
読書の文字の色だけ変えるということは可能でしょうか？

回答No.2

yambejp · ベストアンサー

＞他の方法を試してみます。

であれば、前回書いたとおり色を変えるためのクラスを指定する
などが妥当です
どうしてもクラス名が追加・変更できないのであれば
javascriptで指定するなどの手もありますが、それも環境依存に
なりますので、必ずしも有効な手段ではありません。

<style>
.red{
color:red;
}
</style>
<span class="kyoumitext2">スポーツ：</span>
<span class="kyoumitext2 red">読書：</span>
<span class="kyoumitext2">ＴＶ：</span>
<span class="kyoumitext2">映画：</span>

お礼

度々アドバイスありがとうございます。
色を変えるクラスを指定することで変えることができました!!
なかなかHTML＆CSSは、奥が深く難しいですね。
IE8できれいに表示していても、safariで表示するとレイアウトが微妙に崩れたりしてるので。また、質問アップすると思うので、またお時間があればアドバイスの程よろしくお願いします。

回答No.1

yambejp

kyoumitext2の2番目の要素という意味ですか？

<style>
.kyoumitext2:nth-child(2){
color:red;
}
</style>
<span class="kyoumitext2">スポーツ：</span>
<span class="kyoumitext2">読書：</span>
<span class="kyoumitext2">ＴＶ：</span>
<span class="kyoumitext2">映画：</span>

ただ、ブラウザ依存なのでちゃんとやるならクラスの二重指定するなど
のほうがいいと思いますが・・・

お礼

アドバイスありがとうございます。
やはりブラウザ依存だと、問題が出てきますよね。
なかなか初心者なので、難しいですが他の方法を試してみます。