How to Target Elements with an Attribute That Has Any Value in CSS

/* all elements whose abc value contains "ment" */div[abc*="ment"] { font-weight: 700; }
/* all elements whose abc value is exactly "element-1" */div[abc~="element-1"] { color: blue; }
/* all elements whose abc value is exactly "element" or begins with "element" immediately followed by a hyphen */div[abc|="element"] { background-color: green; }
/* all elements whose abc value starts with "x" */div[abc^="x"] { background-color: red; }
/* all elements whose abc value ends with "x" */div[abc$="x"] { background-color: yellow; }
div { margin: 5px 0px; }

<div abc="element-1">Hello World!</div><div abc="element-2">Hello World!</div>
<div abc="xElement1">Hello World!</div><div abc="xElement2">Hello World!</div>
<div abc="element1x">Hello World!</div><div abc="element2x">Hello World!</div>

Targeting List Items by their Value Attribute

I assume no explanation needed for the ones that are working as you expected. Here are the thoughts about the others.

Point 1: (as noted in JoshC's comment) you have the wrong selector. li[value*="3"] is what you were looking for if you want it to change because it "contains" a 3.

Point 4: Selector specificity has nothing to do with anything inside the attribute selector, but rather the presence of the attribute selector itself. So li[value="12"] and li[value^="1"] have the exact same specificity because both have the type selector li and the attribute selector [value] tied to them. Therefore, the css cascade order wins out; therefore in your example li[value^="1"] is the last matching selector in the cascade and it wins (if you reversed the order the other would win).

Point 6: The css is only reading the html. It does not see what the ol itself is doing with the text that is not a number. In fact, in Firebug, it shows the value as being 0 on my system, but [value="0"] still does not work. The only two selectors that will work for non-numerical values are the actual value itself li[value="jadfk"] or the unqualified attribute value of li[value], which if you made that the default, then it would need to be first in the order of your calls, otherwise it would make all of them pink (again, because of cascade order and equal specificity).

I am not aware of any current way to directly do an evaluation of > or < for an attribute as you desire without javascript. As to a hack to do something like that, a previous answer of mine may be helpful, assuming the number range is limited. That answer is using essentially the same technique as what Lior's later answer to this question has put in his answer (whether he got the idea from my link I provided or not I do not know, nor does it really matter), so I will not repeat the coding and concepts here.

Update (Adding a Solution IE7/8 Compatible)

Since Lior had an answer similar to my linked answer, I came up with this option. It does not use the :not() selector (so if IE7 compatibility is an issue, this may be preferable). Rather, it utilizes the general sibling selector which is IE7 compatible. It uses 12-13 selectors (depending on whether you want the first 10 to have the default background or not), and utilizes the cascade order to override the previous color values (so the order of these selectors in the css is important).

Fiddle Example

li[value] {background: yellow;} /* if other than default bkg. wanted on 1st 10 */
li[value="9"] ~ li[value] {background-color: red;}
li[value="19"] ~ li[value] {background-color: blue;}
li[value="29"] ~ li[value] {background-color: gray;}
li[value="39"] ~ li[value] {background-color: dimgray;}
li[value="49"] ~ li[value] {background-color: brown;}
li[value="59"] ~ li[value] {background-color: purple;}
li[value="69"] ~ li[value] {background-color: Chartreuse;}
li[value="79"] ~ li[value] {background-color: black;}
li[value="89"] ~ li[value] {background-color: DarkSlateBlue;}
li[value="99"] ~ li[value] {background-color: Bisque;}
li[value="109"] ~ li[value] {background-color: Indigo;}
li[value="119"] ~ li[value] {background-color: Lavender;}

(Thanks to Lior's code for the color values used here -- yes, I swiped those.)

This also only works because we are dealing with an ordered list. The previous answer I linked to, we were not (the numbers were arbitrary and in no relation).

Technically, some of the selectors above are redundant

Assuming the value attribute is only on the ordered list, then the selectors could be reduced to this:

Fiddle Example

[value] {background: yellow;} /* if other than default bkg. wanted on 1st 10 */
[value="9"] ~ li {background-color: red;}
[value="19"] ~ li {background-color: blue;}
[value="29"] ~ li {background-color: gray;}
[value="39"] ~ li {background-color: dimgray;}
[value="49"] ~ li {background-color: brown;}
[value="59"] ~ li {background-color: purple;}
[value="69"] ~ li {background-color: Chartreuse;}
[value="79"] ~ li {background-color: black;}
[value="89"] ~ li {background-color: DarkSlateBlue;}
[value="99"] ~ li {background-color: Bisque;}
[value="109"] ~ li {background-color: Indigo;}
[value="119"] ~ li {background-color: Lavender;}

Apply CSS rule to elements matching one of multiple possible attribute values

Put them separately and use a comma in between like below.

This code applies the css to input[name="a"] and/or input[name="b"].

Look at the docs to find out more.

Note: I used background-color: red; instead of display: none; so you can see the difference. To suit your problem, change it back to display: none;

input[name="a"], input[name="b"] {    background-color: red;}

<input name="a" /><input name="b" /><input name="c" />

[data-role="page"] {
    /* Styles */
}