I can't make wildcard work in CSS3

Question

I have this html:

<div> <input class="orderrow-1" type="text"></input> <input class="orderrow-2" type="text"></input> </div>

and this css:

input[class^='orderrow-'] { border: 1px solid #e2e2e2; color: #333; font-size: 1em; margin: 5px 5px 6px 0px; padding: 5px; width: 100px; text-align: right; }

I try to style all input fields with a class that begins with 'orderrow-' but above doesn't work. Any suggestions?

Edit: Sorry, above does work. The problem is that I have two casses. Like this:

<div> <input class="trigger orderrow-1" type="text"></input> <input class="trigger orderrow-2" type="text"></input> </div>

The selector doesn't work when there is something before orderrow-1. Ideas?

It works for me. Are you sure there's nothing else affecting the styles? — animuson
– animuson ♦, Commented Sep 17, 2012 at 8:24
classes selectors like .orderrow-x have higher priority than this selector. You may want to make them more specific or to add !important to styles — keaukraine
– keaukraine, Commented Sep 17, 2012 at 8:26
@keaukraine: No they don't. Class selectors, attributes selectors, and pseudo-classes are all counted alike when calculating specificity. — animuson
– animuson ♦, Commented Sep 17, 2012 at 8:29
@animuson Please create a fiddle on jsfiddle.net so we can see all aspects of your case — keaukraine
– keaukraine, Commented Sep 17, 2012 at 8:32
@keaukraine: I don't need to, that's what the CSS specification says. But if you need proof, here. — animuson
– animuson ♦, Commented Sep 17, 2012 at 8:33

Dpolehonski · Accepted Answer · 2012-09-17 12:04:30Z

The problem is that your using a prefix match ^= which means it will match the value of the class attribute (which includes ALL class names) which begin with orderrow- The actual value of the class attribute it 'trigger orderrow-2' if you want a wildcard selector the specification reccomends this: *= it looks for a value that contains the string at any point.

example:

input[class ^="orderrow-"], input[class *=" orderrow-"] { border: 1px solid #e2e2e2; color: #333; font-size: 1em; margin: 5px 5px 6px 0px; padding: 5px; width: 100px; text-align: right; } input.orderrow-1 { border: 1px solid #F00; }

it is important to note that because attributes selectors and clas selectors have the same specificity you should place the overribe below the attribute to ensure proper cascadence* of the styles (as per my example - jsfiddle).

EDIT: as per comments to use more precise selectors in the example.

docs see the docs for the three different wildcard selector.

*I sometimes make up words, but so long as you get my meaning...

input[class*="orderrow-"] will also match input.abcorderrow-1. A better selector to use is input[class^="orderrow-"], input[class*=" orderrow-"]. See stackoverflow.com/questions/3338680/…

Jamie Paterson · Accepted Answer · 2012-09-21 16:16:13Z

it should be fine check out my code pen test of various css3 pseudo classes here http://codepen.io/jamiepaterson/pen/cADfs

The one you want is the purple text color on this test.

Collectives™ on Stack Overflow

I can't make wildcard work in CSS3

2 Answers 2

2 Comments

1 Comment

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

1 Comment

Linked

Related