web-dev-qa-db-ja.com

クラスプレフィックスによるCSSセレクターはありますか？

クラスの1つが指定されたプレフィックスと一致する要素にCSSルールを適用したい。

例えば。 status-で始まるクラスを持つdivに適用されるルールが必要です（次のスニペットではAとCですが、Bは含まれません）。

<div id='A' class='foo-class status-important bar-class'></div>
<div id='B' class='foo-class bar-class'></div>
<div id='C' class='foo-class status-low-priority bar-class'></div>

ある種の組み合わせ：
div[class|=status]およびdiv[class~=status-]

CSS 2.1で実行可能ですか？ CSS仕様の下で実行可能ですか？

注：jQueryを使用してそれをエミュレートできることは知っています。

csscss-selectors
154
THX-1138

CSS2.1では実行できませんが、CSS3属性の部分文字列一致セレクターでは可能です（IE7 +ではareがサポートされています）：

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

2番目の属性セレクターのスペース文字に注意してください。これは、div属性が次の条件のいずれかを満たすclass要素をピックアップします。

  • [class^="status-"] —「status-」で始まります

  • [class*=" status-"] —スペース文字の直後にあるサブストリング「status-」が含まれます。クラス名は空白 HTML仕様による で区切られているため、重要なスペース文字です。これは、複数のクラスが指定されている場合、最初の後に他のクラスをチェックし、および属性値がスペースで埋められている場合に最初のクラスをチェックするボーナスを追加しますclass属性を動的に出力するアプリケーション）。

当然、これは here で示されているようにjQueryでも機能します。

上記のように2つの属性セレクターを組み合わせる必要がある理由は、[class*="status-"]などの属性セレクターが次の要素と一致するためです。

<div id='D' class='foo-class foo-status-bar bar-class'></div>

そのようなシナリオがnever発生することを保証できる場合、簡単にするためにそのようなセレクターを自由に使用できます。ただし、上記の組み合わせははるかに堅牢です。

HTMLソースまたはマークアップを生成するアプリケーションを制御できる場合は、代わりにstatus-プレフィックスを独自のstatusクラスにするのが簡単な場合があります Gumboが示唆するように 。

323
BoltClock

CSS属性セレクターを使用すると、文字列の属性を確認できます。 （この場合-クラス名）

https://developer.mozilla.org/en-US/docs/Web/CSS/Attribute_selectors

（実際には2.1および3の「推奨」ステータスにあるように見えます）


これがどのように機能するかを以下に説明します。

  • [ ]：複雑なセレクターのコンテナーです...
  • class： 'class'は、この場合に見ているattributeです。
  • *：修飾子（存在する場合）：この場合-「ワイルドカード」は、一致するものを探していることを示します。
  • test-：属性の値（あると仮定）-文字列「test-」を含む（何でも可能）

したがって、たとえば：

[class*='test-'] {
  color: red;
}

正当な理由がある場合は、要素もより具体的にすることができます

ul[class*='test-'] > li { ... }

Edgeのケースを見つけようとしましたが、^と*の組み合わせを使用する必要はありません-*がすべてを取得します...

例： http://codepen.io/sheriffderek/pen/MaaBwp

http://caniuse.com/#feat=css-sel2

IE6を超えるものはすべて喜んで従います。 ：）

ご了承ください：

[class] { ... }

クラスで何かを選択します...

10
sheriffderek

これはCSSセレクターでは不可能です。ただし、1つではなく2つのクラスを使用できます。 statusおよびimportantの代わりにstatus-important。

6
Gumbo

これはできません。 1つの 属性セレクター があり、これは-記号まで完全または部分的に一致しますが、複数の属性があるためここでは機能しません。探しているクラス名が常に最初であれば、これを行うことができます：

<html>
<head>
<title>Test Page</title>
<style type="text/css">
div[class|=status] { background-color:red; }
</style>
</head>
<body>
<div id='A' class='status-important bar-class'>A</div>
<div id='B' class='bar-class'>B</div>
<div id='C' class='status-low-priority bar-class'>C</div>

</body>
</html>

これは、どのCSS属性セレクターが最も近いかを示すためのものであり、javascriptが属性を操作する可能性があるため、クラス名が常に前面にあると想定することはお勧めできません。

2
SBUJOLD