CSS属性セレクタ、複数のクラス、ワイルドカードを1つのクラス定義に適用できますか？

Question

は2つの可能性を次のマークアップ考えてみましょう：

<input class="someclass ng-valid ng-invalid-otherstuff ng-valid-amountdetermined some-other-class"> 
<input class="someclass ng-invalid ng-valid-otherstuff ng-invalid-amountdetermined some-other-class"> 

「量」は、変数言葉で、これは本当に何でも、何でも、「メッセージ」、「アカウント」である可能性があります。私はCSSで区別できるようにする必要があります。属性セレクタは、^、*、|の属性値全体を考慮して短くなります。または〜。

私はクラスを一つ取り除いて、そのクラスが "ng-valid- * determined"であるかどうかチェックする必要があります。それは私には、これは単純にCSSを使用することはできませんか、または何かが不足しているようですか？

"ng-valid-determined *"を生成するのが回避策ですが、これは避けたいものです。誰にもこれに関するアイデアはありますか？明確化として、私は "someclasses"が何であるかわからない、私は自分のCSSセレクターを突き止めるためにそれらを使用することはできません。問題は、私が必要とするクラスがクラス配列のどこにでも配置できるということです。私は*に決定またはNG-invalid- NG-valid-をターゲットできるようにする必要があるよう

私は、問題を視覚化するためにフィドルを作成し、これは当然のソリューションではありません*

http://jsfiddle.net/mC2EW/

を決定using two css attribute selectors with *

// EDIT1と混同しないでください：あなたは、単に[class*="amount"]を使用することはできません理由があるフィドル

Answer 1

を申し訳ありませんが、これはセレクタだけではあなたの現在の状況を考えるとできません。属性セレクタには、値の途中でワイルドカードを使用する方法や、スペースで区切られた属性内の個々のコンポーネントをチェックすることはできません。クラスセレクタはそのような機能を提供しません。これはAngularJSやCSSのデザイン上の欠陥だと考えられますが、それが何であれ、純粋なCSSセレクタではできません。

には、があります。これは別の方法で回避できます。コメントで述べたように、簡単に選択できるようにカスタムクラスを追加するには、ng-classに簡単にフックするか、別の回答に示唆されているように、データ属性を使用して検証情報を格納することを検討してください。

Answer 2

を追加しました：質問 // EDIT2を簡素化？

JSFiddle example。

data-*属性でより適切なものを保持するためにクラスを使用しているようです。

<input class="someClass determined" data-validity="valid" data-amount-determined="false" /> 
<input class="someClass determined" data-validity="invalid" data-amount-determined="true" /> 

JSFiddle example using data。

Answer 3

私はあなたがここで行うことができることを最高の.someclassを探し、それがまたも同様を決定したかどうかをチェックだと思う：

input.someclass[class*="determined"] { background-color: red; } 

フィドル：http://jsfiddle.net/gaE5X/

Answer 4

これは古いものですが、私は同様の解決策を探していました。私は最高の答えを持っていると信じています。私のpenをご覧ください。

HTML

<input class="someclass ng-valid ng-invalid-otherstuff 
ng-valid-amountdetermined some-other-class"> <input class="someclass 
ng-invalid ng-valid-otherstuff ng-invalid-amountdetermined 
some-other-class"> 

CSS

[class*=ng-valid][class*=ng-invalid-otherstuff][class*=determined] { 
background: #000; } 
[class*=ng-invalid][class*=ng-valid-otherstuff][class*=determined] { 
background: #ddd; } 

それはあなたが同じ属性セレクタ内で複数のワイルドカードをターゲットにすることはできませんが、あなたがチェーンのワイルドカードは、あなたのターゲットを見つけるために、属性セレクタをできることが判明。