【HTML CSS】CSSセレクタ　クラスの中の要素にクラスを付けると？

投稿日時: 投稿者:

今日は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のセレクタのシステム開発備忘録でした。