今だけ人気マンガ100円レンタル特集♪

下記HTMLがあるとします。

<ul>
<li><a class="test" href="index.html">テスト</a></li>
</ul>

これにCSSを記述すると
.test {
color: blue;
}
テストと書いた文字が青くなります。

疑問に思うのは、CSSで上記の方法と
下記の方法ではどちらも結果が同じになると思うのですが、
どちらが正しい記述方法とかあるのでしょうか。

ul li .test {
color: blue;
}

宜しくお願いします。

A 回答 (1件)

両方正しいですよ!



<ul><li><a class="test" href="index.html">テスト</a></li></ul>
<ol><li><a class="test" href="index.html">テスト</a></li></ol>
<p><a class="test" href="index.html">テスト</a></p>

これで表示すればわかる事

HTMLで、そこ1つだけなら、どちらでも良いですが、細かく書いた方が、絞り込む事ができます。
HTMLで、そこだけではなく、他にの箇所にも複数の.testがある場合には全ての.testに適用するのか? それとも個別に適用するのか?によって、CSSをどのように書くべきかが変わります。
適用させたいように、CSSを書きます。



詳細度といって、優先度が変わります。
いくつか重複しちゃった場合にどうなる? という事です・・・
ul li .test { color: blue;}
li .test { color: yellow;}
.test { color: red;}

------------------------------
上記の意味がわからなければ、イメージで理解してみましょう。

クラスという事を引っ掛けて、学校のクラスで例えると考えるとわかります。

3年 .B組{ 青の旗を: 挙げなさい!;}  → 3年B組の生徒は青の旗を挙げて下さい。
.B組{ 青の旗を: 挙げなさい!;}  → B組の生徒は青の旗を挙げて下さい。
意味が違うでしょ?
B組という指定は同じだけど、
前者は3年という指定もあるが、
後者は3年の指定が無く2組と指定しているから、1年のB組も2年のB組も適用します。

ULのグループの中の LIの中の testだけを指定しているのか、
それとも、testだけを指定しているのか、の違いです。
    • good
    • 0
この回答へのお礼

とても分かりやすい回答をありがとうございます。
おかげで理解出来ました。

お礼日時:2020/09/04 09:22

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!

このQ&Aを見た人はこんなQ&Aも見ています


このQ&Aを見た人がよく見るQ&A

人気Q&Aランキング