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