6

Consider the following markup with 2 possibilities:

<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, this could be anything, "message", "account", anything really. I need to be able to make the distinction in CSS. The attribute selector fails short as it considers the entire attribute value for ^, *, | or even ~.

I would need to single out a class, then check if that class is "ng-valid-*determined". It appears to me this is simply not possible using css, or am I missing something?

A workaround would be to generate "ng-valid-determined*" but this is exactly what I would like to avoid. Does anyone have any ideas on this? As a clarification, I do not know what the ''someclasses' are, I cannot use them for pinpointing my css selector. The problem is exactly that the class I need could be located anywhere inside the class array.

I created a fiddle to visualise the problem, this is of course not the solution as I need to be able to target ng-valid-*determined or ng-invalid-*determined

http://jsfiddle.net/mC2EW/

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

//edit1: simplified the question //edit2: added a fiddle

Improve this question
4
  • Is there a reason you're storing whatever the ng-x-VALUEdetermined is in a class and not in a data attribute? Commented Feb 15, 2013 at 15:33
  • ng implies to me you're using Angular. Can't you just use an ngClass directive to add a specific class under the conditions you need? Commented Feb 15, 2013 at 15:37
  • @keithjgrant exactly. But I would like not to write my own directive for that. Angular generates these classes automatically and I would like to hook into these classes to style my input boxes. Commented Feb 15, 2013 at 15:41
  • You shouldn't need yout own directive. Read up on the ngClass one. Shouldn't be much harm in adding one more class to the element. Commented Feb 15, 2013 at 16:07

4 Answers 4

Reset to default
5
+50

Even though this is an old one, I was looking for a similar solution. I believe I have the best answer, please see my 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; }

It turns out that while you cannot target multiple wildcards within the same attribute selector, you can chain wildcard attribute selectors to find your target.

Improve this answer
Sign up to request clarification or add additional context in comments.

Comments

2

Sorry, this is not doable with selectors alone given your current situation. Attribute selectors don't have a way of using wildcards in the middle of a value nor can they allow checking of individual components in a space-separated attribute, nor do class selectors provide such functionality. You could consider this a design flaw of AngularJS or one of CSS, but whatever it is, it's not doable with a pure CSS selector.

You will have to work around this a different way. As mentioned in the comments, you can easily hook on to ng-class to add custom classes to make selecting easier, or as suggested in another answer, consider using data attributes to store validation information instead.

Improve this answer

1 Comment

Thanks, I was afraid it wasn't possible but at least I have a confirmation now :). I will look into the other answers to create a workaround. I marked this as the answer as it explains the (im)possibility of my request.
2

I think the best that you could do here is look for the .someclass and then check if it also has determined as well:

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

fiddle: http://jsfiddle.net/gaE5X/

Improve this answer

1 Comment

Hmmmm, I don't know what the someclasses are, and I can't use them in my css selectors. I will update my question to reflect this. The problem is also that the line above will select all my input fields. I need to be able to make a distinction. I will add a jsFiddle for that.
2

Is there a reason you can't simply use [class*="amount"]?

JSFiddle example.

It sounds like you're using classes to hold what would be better suited in a data-* attribute.

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

Improve this answer

3 Comments

I believe that he/she is trying to specifically target ng-(.*)determined regardless of the valid/invalid/random field contained.
I've modified my answer. I think he/she is attempting to store data as a class name. data would be more appropriate here I think.
Maybe I should've clarified, I'm using angular flags for my validity (using directives). Angular generates the "ng-invalid-amountdetermined" class. I'll need to look into the data tags, but the logic described in the question is what angular generates automatically. I would like to hook in on that and not write my own. Sorry for not making that clear from the get-go.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.