クラス接頭辞に基づいて CSS 要素を選択するにはどうすればよいですか?

クラス接頭辞用の属性ベースの CSS セレクター

CSS では、クラス接頭辞に基づいて要素を識別するのは複雑な作業となる場合があります。クラスが「status-」などの特定の接頭辞で始まる要素にルールを適用するシナリオを考えてみましょう。

CSS 互換性

残念ながら、 CSS 2.1 には、このタスクに必要なセレクターがありません。ただし、CSS3 では属性部分文字列一致セレクターが導入されており、これにより新たな可能性が開かれます。

CSS3 属性セレクター

取り組むことができる CSS3 属性セレクターこの挑戦are:

• [class^="status-"]: クラス属性が「status-」で始まる要素と一致します。
• [class*=" status-"]: 一致します。クラス属性に、直前に空白文字が続く部分文字列「status-」が含まれる要素。スペース文字に注意してください。これにより、他のクラスで一致が行われないようになります。

セレクターの組み合わせ

必要な要素をすべてキャプチャするには、これらを組み合わせる必要があります。 2 つのセレクター:

div[class^="status-"], div[class*=" status-"]

この組み合わせにより、「status-」で始まるクラスを持つ要素と、空白文字に続く "status-" 部分文字列は両方とも選択されます。

注意事項と代替案

[class*="status-"] セレクターは次のことができることに注意してください。 HTML に「foo-status-bar」のようなクラスが含まれている場合は、望ましくない要素と一致します。これを回避するには、そのようなシナリオが不可能であることを確認してください。

あるいは、マークアップを生成する HTML またはアプリケーションを制御できる場合は、独自のプレフィックスを持つ専用の「ステータス」クラスを作成する方が簡単な場合があります。これによりプロセスが簡素化され、一貫性が確保されます。

以上がクラス接頭辞に基づいて CSS 要素を選択するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。