<ol>に対して行うcssに関して

Question

"HTML&CSSとWebデザイン実践講座"の本にて学習をしております。
初歩的な部分なのですが、なぜこうなるのか理解ができなかったためご教示いただけますと幸いです。

質問したいこと

見出し(タイトル)部分だけのフォントを変更するという部分でした。
本では、 cssにてtimeline-title のクラスにフォント変更を行うのではなく、timeline のクラスにフォント変更を適用させておりました。

timeline のクラスに適用したら全体が適用されると思っていたのですが、なぜ timeline-content にはフォント変更適用されていないのでしょうか？

該当のソースコード

<ol class="timeline">
                <li class="timeline-item">
                    <h3 class="timeline-title">お申込み</h3>
                    <p class="timeline-content icon-file">
                        応募フォームより必要事項を記入してお申し込みください。ファイルの添付はできません。
                    </p>
                </li>
                <li class="timeline-item">
                    <h3 class="timeline-title">スキルテスト</h3>
                    <p class="timeline-content icon-code">
                        HTML/CSSのコーディングについてスキルテストを行います。（所要時間60分）
                    </p>
                </li>
                <li class="timeline-item">
                    <h3 class="timeline-title">面談</h3>
                    <p class="timeline-content icon-chat">
                        スキルテストに合格した人はビデオ通話にて30分程度の面談を行います。日程は相談可能です。
                    </p>
                </li>
                <li class="timeline-item">
                    <h3 class="timeline-title">採用</h3>
                    <p class="timeline-content icon-hands">
                        採用となった方は契約完了後、ご希望の勤務地により業務がスタートします。一緒に素敵なWebサイトを作りましょう！
                    </p>
                </li>
            </ol>

Comments

[int32_t]

「フォント変更」とは具体的にどういう変更でしょうか。CSSも開示してください。

[rn.]

ご指摘ありがとうございます。
見出し(title)部分のみ明朝体に変更するという内容でした。下記、本に載っていた回答cssです。
よろしくお願いいたします。

/* Timeline */
.timeline {
list-style: decimal inside;
font-family: 'Sawarabi Mincho', sans-serif;
}
.timeline-item {
margin-bottom: 2rem;
}
.timeline-title {
font-size: 1.375rem;
display: inline-block;
margin-bottom: 1rem;
}
.timeline-content {
font-family: sans-serif;
}

Answer 1

CSSは入れ子の上位で設定したものより下位で設定されたものが優先されます

• 直接対象の要素と継承されたスタイル

<style>
.a{
color:red !important;
}
.b{
color:blue;
}
</style>

<div class="a">
<div class="b">
a-b 青
</div>
</div>
<div class="b">
<div class="a">
b-a 赤
</div>
</div>

参考

なお、同じ優先度設定をされた要素についてはCSSであとから書いた記載が優先されます（上書きされる）

<style>
.a *{
color:red;
}
.b *{
color:blue;
}
</style>

<div class="a">
<div class="b">
<span>a-b 青</span>
</div>
</div>
<div class="b">
<div class="a">
<span>b-a 青</span>
</div>
</div>

※spanは「.a *」「.b *」の両方の影響をうけるが、あとから記載された「.b *」が優先される

Answer 2

.timeline {
  list-style: decimal inside;
  font-family: 'Sawarabi Mincho', sans-serif;
}

このルールセットで .timeline 全体のフォントファミリーが指定されますが、

.timeline-content {
  font-family: sans-serif;
}

このルールセットで .timeline-content のフォントファミリーは上書きされていますので、結局は .timeline-title 内のテキストだけが Sawarabi Mincho になります。

Comments

[rn.]

大変わかりやすい回答ありがとうございます！
追加で誠に恐縮なのですが、
.timeline-content のみに font-family を指定する方法ではなく、今回のように全体に指定してから上書きするのは何か意図があるのでしょうか？

[int32_t]

> 何か意図があるのでしょうか？

それは、正確なことは書いた人にしかわからないでしょう。
timeline-title と timeline-content 以外にも要素を足すつもりがあって、それは Sawarabi Mincho になって欲しいのかもしれませんね。

[rn.]

なるほど、そういった可能性もありますよね。
追加まで丁寧にコメントくださり大変助かりました。ありがとうございました🙇‍♀️