1

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?

user1676967
  • 11
  • 2
  • It [works for me](http://jsfiddle.net/Q4jzb/). Are you sure there's nothing else affecting the styles? – animuson Sep 17 '12 at 08: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 Sep 17 '12 at 08:26
  • 1
    @keaukraine: No they don't. Class selectors, attributes selectors, and pseudo-classes are all counted alike when calculating specificity. – animuson Sep 17 '12 at 08:29
  • @animuson Please create a fiddle on http://jsfiddle.net so we can see all aspects of your case – keaukraine Sep 17 '12 at 08:32
  • 1
    @keaukraine: I don't need to, that's what the [CSS specification](http://www.w3.org/TR/css3-selectors/#specificity) says. But if you need proof, [here](http://jsfiddle.net/eLaBh/). – animuson Sep 17 '12 at 08:33
  • @animuson: You're right. I just tried to simplify my example. Se my edit for the real problem. – user1676967 Sep 17 '12 at 11:25

2 Answers2

1

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

Dpolehonski
  • 948
  • 6
  • 11
  • First time I hear about "cascadence". – Knu Sep 17 '12 at 11:51
  • `input[class*="orderrow-"]` will also match `input.abcorderrow-1`. A better selector to use is `input[class^="orderrow-"], input[class*=" orderrow-"]`. See http://stackoverflow.com/questions/3338680/css-selector-by-class-prefix/8588532#8588532 – BoltClock Sep 17 '12 at 11:57
0

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.

Jamie Paterson
  • 426
  • 3
  • 10