CSS でクラスと ID セレクターを組み合わせて特定の HTML 要素をターゲットにするにはどうすればよいですか?

CSS セレクターでのクラスと ID の組み合わせ

HTML 要素をスタイル設定する場合、クラスと ID の両方を使用して特定の要素をターゲットにするのが一般的です。場合によっては、両方の基準を組み合わせる必要があるかもしれません。これを実現する方法は次のとおりです。

ID とクラスの両方を使用して要素をクエリする

次の HTML を考えます。

<div>
<p>この要素を次のようにスタイル設定するには「sectionA」クラスと「content」ID の両方があることを確認するには、次の CSS を使用します。 selector:</p>
<pre class="brush:php;toolbar:false">div#content.sectionA

このセレクターでは、「#」記号が ID の前にあり、「.」記号が ID の前にあります。シンボルはクラスの前にあります。これにより、両方の基準を満たす要素にのみ CSS ルールが適用されます。

追加メモ

セレクター内のクラスと ID の順序が重要であることに注意してください。 「.sectionA#content」と記述すると、必ずしも「content」ではなく、「sectionA」クラスと任意の ID を持つ要素が選択されます。

代替アプローチ

上記の手法を使用すると、複数のクラスまたは複数の ID を組み合わせることができます。ただし、長いセレクターを回避する別のアプローチもあります。

1. クラスの連結: 「content-sectionA」または「sectionA-content」のようなクラス名を連結して、一意のクラスを作成します。これにより、セレクターが ".content-sectionA" または ".sectionA-content" に簡素化されます。
2. 子セレクターを使用する: クラスが子要素に適用される場合は、"> ;"セレクター内の記号 (例: "div#content > p.sectionA."

)