質問: cssのセレクタの記述方法について 下記htmlがあるとします。 * テスト これにcssを記述すると .test { color: blue; } テストと書いた文字が青くなります。 疑問に思うのは、cssで上記の方法と 下記の方法ではどちらも結果が同じになると思うのですが、 どちらが正しい記述方法とかあるのでしょうか。 ul li .test { color: blue; } 宜しくお願いします。
回答: 両方正しいですよ! * テスト 1. テスト テスト これで表示すればわかる事 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だけを指定しているのか、の違いです。