ここから本文です

【HTML・CSS】なぜpの文字色が赤になるのか?

vif********さん

2020/5/1811:02:00

【HTML・CSS】なぜpの文字色が赤になるのか?

以下のHTML、CSSで、なぜpの文字色が赤になるのでしょうか。

index.html-----

<div class="foo">
<p>sample text</p>
</div>
------

style.css-----

.foo{
color: blue;
}

p{
color: red;
}
-----


クラス名で指定しているため、青が優先されるかと思っていました。
なぜ赤が優先されるかの解説をしていただけないでしょうか?
よろしくお願いいたします。

閲覧数:
20
回答数:
4

違反報告

回答

1〜4件/4件中

並び替え:回答日時の
新しい順
|古い順

shimippyさん

2020/5/2400:26:33

基本的にCSSでは直接的に指定されているほど強く働くという考え方になります。
今回の場合、.foo{color:blue}は<p>を包括する外側の<div>要素への指定になりますが、
p{color:red}は<p>に対して直接指定をしているからp{color:red}が勝つ、という事になります。

逆にこのような仕組みになっていなかったらと想像すると、今回の例で<p>だけの色を変える事ができなくなってしまう事が分かると思います。

caf********さん

2020/5/2219:51:23

cssは後で書いたもの(下に書いたもの)が優先されるはずです。たしかカスケードだったかな!?ググってみると詳しく出てくると思います!頑張ってください

sho********さん

2020/5/1908:54:54

スタイルが<div>と<p>で二重に定義されているので、後の<p>で定義されている赤が優先されます。
<p class=“foo”>とすれば青く表示されます。

プロフィール画像

カテゴリマスター

shimixさん

2020/5/1811:10:05

>クラス名で指定しているため、青が優先されるかと思っていました。

class="foo" を指定しているのは p要素の親のdiv要素です。他に何も指定がない文字は青になりますが、要素指定のstyleがあればそちらが優先されます。

当然、p要素に class="foo" を書けばいいのですけどね。



あるいは .foo の下の * に対して指定するとか

foo 直下の文字に対する指定
.foo {
color: blue;
}

foo の下の「要素」の文字に対する指定
.foo * {
color: blue;
}

↑ この指定方法がある・・・ということは、提示されたソースの場合はclass指定が優先されないことを意味していますよね(汗

この質問につけられたタグ

みんなで作る知恵袋 悩みや疑問、なんでも気軽にきいちゃおう!

Q&Aをキーワードで検索:

Yahoo! JAPANは、回答に記載された内容の信ぴょう性、正確性を保証しておりません。
お客様自身の責任と判断で、ご利用ください。
本文はここまでです このページの先頭へ

「追加する」ボタンを押してください。

閉じる

※知恵コレクションに追加された質問は選択されたID/ニックネームのMy知恵袋で確認できます。

不適切な投稿でないことを報告しました。

閉じる