ログイン

問題38 sectionの中にある1番目のpタグの文字色を変更しよう

HTML_CSSの問題

HTML_CSS

疑似クラスを使って文字色を変更する問題となります。 特定の要素だけにスタイルを指定する方法を覚えましょう。柔軟に操作できる力が身につきます!

sectionの中にある1番目のpタグの文字色を変更しよう

問題

sectionの中にある1番目のpタグの文字色を変更しましょう。
classの追加はNGとします。

見本画像を参考にしてCSSに記述し実装してください。

自分の環境に書くコード

              <section>
    <div>テキストA</div>
    <p>テキストB</p>
    <div>テキストC</div>
    <p>テキストD</p>
</section>
¥HTML¥
            

期待する画面

コードのアイコン

解答ソースコード

              <section>
    <div>テキストA</div>
    <p>テキストB</p>
    <div>テキストC</div>
    <p>テキストD</p>
</section>
¥HTML¥
            
              section > p:first-of-type {
    color: red;
}
¥CSS¥
            
答えのアイコン

解説

この場合、first-of-typeの擬似クラスを使用しましょう。

first-of-typeを使うことで親要素であるsectionタグの最初の
pタグを指定することができます。
ログインして解答を見る
first-of-typeという疑似クラスを使って親要素であるsectionタグ内の「一番最初の要素」を指定しました。:last-of-typeにすると「一番最後の要素」を指定できます。
また:nth-of-type()という疑似クラスを使えば、何番目の要素でも指定が可能となり奇数や偶数などの倍数指定もできます。
:nth-of-typeは、とても万能な疑似クラスなので是非覚えておきましょう。
よくnth-child()と違いが分からないという方も多いのですが、違いは指定の要素以外も数えるか数えないかだけです。
今回の問題のように、1番目のpタグの文字色を変える場合は、手前にdiv要素があるのでp:nth-child(1)とした場合には1番目のdiv要素が選択されてしまいます。
このあたりをうまく使い分けられるようにしておきましょう。
twitterのアイコン
活動記録をTweetする
完了にする!
1.HTMLの宣言をしてみよう
続きの動画を見たい方は公式LINEから「HTML」と送信すると動画が見れます。
LINEの友達追加でお役立ち動画をGET!!