今日はCSSのセレクタの備忘録です。
以下のようなCSSの適用は良く行います。
１）Div要素にクラスをつけCSSを適用させます。
２）Span要素だけにCSSを適用させます。
で、更に一部だけのSpan要素に違うCSSを付けたいとき。。。有りますよね？
単純にクラスの中の要素にクラスを付けると？
下の例のようにDiv要素の中のspan要素にクラスspanClass1を付けても、思ったような挙動になりません。
「指定あり-divClass・SpanClass1」は
.spanClass1{
background: blue;
color: white;
}
としているので、バックグランドに青色、テキスト文字は白を期待するのですが、そのように表示されません。
じゃ、どうするか？
その際は下の例のように、Span要素にクラスを指定して.divClassの中のSpan要素のクラスspanClassが付いているものだけという設定をすることで可能になります。
.divClass span.spanClass2{
background: blue;
color: white;
}
idを付けるという手ももちろん有るのですが、要素が沢山あるとメンテがしずらいですから。
<html>
<style>
.divClass span{
background: red;
color: black;
}
.spanClass1{
background: blue;
color: white;
}
.divClass span.spanClass2{
background: blue;
color: white;
}
</style>
<body>
<div>
<span>指定なし</span>
<span class='spanClass1'>指定あり-spanClass</span>
</div>
<br />
<div class='divClass'>
<span>指定あり-divClass</span>
<span class='spanClass1'>指定あり-divClass・SpanClass1</span>
<span class='spanClass2'>指定あり-divClass・SpanClass2</span>
</div>
</body>
</html>
CSSのセレクタは汎用性が有るで使いやすいですね。
その分奥が深くて、、、私もわからないことが多いので、勉強しなければいけないなって感じています。
今日は、CSSのセレクタのシステム開発備忘録でした。