CSS 可読性の高まるセレクターの書き方
CSSのセレクターをまとめて書く方法と特定の範囲の要素にスタイルを適用する方法
CSSを書く際に、複数のセレクターをまとめて指定したり、特定の範囲内の要素にのみスタイルを適用したりすることは、コードの整理や可読性向上に役立ちます。本記事では、以下の2つの方法について詳しく解説します。
複数のセレクターをまとめる方法
特定の範囲の要素にスタイルを適用する方法
1. 複数のセレクターをまとめる方法
CSSでは、複数の要素やクラスに同じスタイルを適用する場合、それぞれのセレクターをカンマ（,）で区切ることで、一括指定することができます。
例：複数のクラスをまとめる
.news1, .news2 {
font-size: 16px;
color: #333;
margin-bottom: 10px;
}このように書くことで、.news1と.news2の両方の要素に対して、同じfont-size、color、margin-bottomのスタイルが適用されます。
まとめ書きのメリット
コードの重複を減らせる：同じスタイルを複数のセレクターに適用する際に、コードの量を減らせる。
可読性が向上する：どの要素が同じスタイルを適用されるのかが分かりやすくなる。
メンテナンスがしやすい：スタイルの変更を一括で行えるため、修正が楽になる。
2. 特定の範囲の要素にスタイルを適用する方法
あるクラスの中に含まれる特定の要素だけにスタイルを適用したい場合は、セレクターをネストして書くことで、範囲を限定できます。
例：.news1 内の p 要素だけに適用する
.news1 p {
font-size: 14px;
line-height: 1.5;
color: #666;
}このコードでは、.news1 の中にある p 要素だけが対象になります。.news2 の p 要素には適用されません。
応用例：子セレクター > を使う
子セレクター（>）を使うと、直接の子要素にのみ適用することができます。
.news1 > p {
font-weight: bold;
}この場合、.news1 の直下にある p 要素のみにスタイルが適用され、さらに内側の div などの中にある p には影響を与えません。
要するに
複数のセレクターをまとめる場合は、カンマ（,）を使うことで効率的に指定できる。
特定の範囲の要素にスタイルを適用するには、クラスセレクターと要素セレクターを組み合わせる。
子セレクター（>）を使うと、より厳密に適用範囲を制御できる。
このような書き方を活用することで、CSSの管理が楽になり、より整理されたスタイルシートを作成することができます。ぜひ、実際のプロジェクトで試してみてください！