I'm assigning a special css to my ul elements in order to specify column counts and break points. For example:

<ul class="col1"><li>....</li><li>....</li>...</ul>

...denotes a single column listing.

<ul class="col2"><li>....</li><li>....</li>...</ul>

...denotes a two column listing.

<ul class="col3"><li>....</li><li>....</li>...</ul>

.denotes a three column listing.

etc...

The common thing is that the "col" stem will always precede the column count.

In my css, I'd like to specify that any element that has the root css class "col" have a special class of properties. The same as if I had used class="col 1" or class="col 2" or class="col two".

Is this possible with css3 similar to how we can target specific attribute values with something like this?

header[role="banner"]

PS: obvious question you may be asking is "Why not just use class='col x' and then target the collection with .col {...}"?

Obviously I can do that, however, I want to learn something new, if its possible. Also, I'm trying to keep the css as concise as possible without being too generic so as to cause css clashes with unknown css in the markup (wordpress app, so there can be plugins that have their own css in the same scope as mine; and chances of their being classes named "one", "two", "three", etc are too high to use them as stand alone subclasses.)

Update: after a bit more research, I've found the answer I'm looking for. Hopefully it helps someone else:

.myelement ul[class^="col"]

You can use this to target any ul element within the "myelement" container which has css beginning with the stem identified in the class paramater.

Browser SupportThe above selector works in all modern browsers: Safari, Chrome, Firefox, Opera, and IE. Internet Explorer has perfect support for this all the way down to version 7, but no support in 6