Geek asks and answers

CSS attribute selector, multiple classes, wildcards applied to single class definition?

Consider the following markup with two options:

<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">

"Amount" is a variable word, it can be anything, "message", "account", something really. I need to be able to make a difference in CSS. The attribute selector is invalid because it takes into account the value of the entire attribute for ^, *, | or even ~.

I need to highlight a class and then check if this class is "ng-valid- * defined". It seems to me that this is simply not possible using css, or am I missing something?

A workaround would be to generate "ng-valid-defined *", but that is exactly what I would like to avoid. Anyone have any ideas on this? As an explanation, I don’t know what “someclasses” are, I cannot use them to define my css selector. The problem is that the class I need can be located anywhere inside the class array.

I created a fiddle to visualize the problem, this, of course, is not a solution, since I need to target ng-valid- * defined or ng-invalid- * defined

http://jsfiddle.net/mC2EW/

Not to be confused with using two css attribute selectors with *

// edit1: simplified question // edit 2: added script

+5
source share
4 answers

, , . , , , ​​. AngularJS CSS, , CSS.

, . , ng-class, , , , .

+2

, [class*="amount"]?

JSFiddle.

, , data-*.

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

JSFiddle data.

+2

, , , - .someclass, , :

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

: http://jsfiddle.net/gaE5X/

+1

, , . , , , . 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; }

, , , .

0

More articles:


All Articles