擬似クラス「:first-child」が効かない時の対処法

タイトル

この文章だけ文字の色は赤にしたい

この文章の文字の色は黒のまま

この文章の文字の色は黒のまま

この文章の文字の色は黒のまま

 

[html]

<div class="box1">
<h1>タイトル</h1>
<p>この文章だけ文字の色は赤にしたい</p>
<p>この文章の文字の色は黒のまま</p>
<p>この文章の文字の色は黒のまま</p>
<p>この文章の文字の色は黒のまま</p>
</div>

 

[css]

.box1 p:first-child{color:red;}

 

これだと、最初の<p>タグにスタイルが適用できません。 原因は<div class="box1">の中に最初の要素が<h1>なのが問題となります。 対応は下記のように変更します。

 

タイトル

この文章だけ文字の色は赤にしたい

この文章の文字の色は黒のまま

この文章の文字の色は黒のまま

この文章の文字の色は黒のまま

 

[html]

<div class="box2">
<h1>タイトル</h1>
<p>この文章だけ文字の色は赤にしたい</p>
<p>この文章の文字の色は黒のまま</p>
<p>この文章の文字の色は黒のまま</p>
<p>この文章の文字の色は黒のまま</p>
</div>

 

[css]

.box2 > h1 + p{color:red;}

 

「+」を使うと<h1>の次の要素を指定することができます。

現在の稼働率
150%

お仕事のご依頼は
受け付けておりません。