select all ids where the only difference is the number in the ID name

Question

I have all these divs with an identical ID name except for the fact that they all have a different number at the end.

I know I can use a class but it must be an ID.

    <div id="myid1">text</div>
    <div id="myid2">text</div>
    <div id="myid3">text</div>
    <div id="myid4">text</div>

   <div id="test1">text</div>
   <div id="test2">text</div>

My question is using css how can I select them all but shorter than this .

#myid1,#myid2,#myid3,#myid4{
    color:red;
}

Does this type of thing exist and if so how do you write it?

myid1[*]{
    color:red;
}

Answer 1

Just use the prefix attribute selector

[id^="myid"] {

}

This selector targets any element with an ID attribute that has the prefix "myid" - quotes around the value are optional. This selector works in IE7 & above as well.

Answer 2

you can use begins with this attr selector.

[id^=myid] {
    color:red;
}

DEMO

Answer 3

CSS3 should help here:

div[id^="myid"]

AND

div[id^="test"]