Miguel Mas Miguel Mas - 5 months ago 23
CSS Question

Populating numbered class names in css sheet

I have

.cover0,.cover1,.cover2
{
opacity : .50;
filter : alpha(opacity=50); /* IE<9 */
cursor : default;
}


in my style sheet.

I need to add classes up to .cover100

Is there any way to do it apart from hardcoding it?

Something like a for loop in javascript.. can be done something like that in a style sheet?

Thanks!

Answer

SASS is the best option.

Though you can use a Attribute selector

* meaning the class contains

NOTE: this will match other classes containing cover, ie covered, etc

[class*=cover] {

    height:50px;
    border:1px solid black;
      opacity : .50;
      filter  : alpha(opacity=50); /* IE<9 */
      cursor  : default;
  }
<div class="cover extras">
</div>
<div class="cover">
</div>
<div class="befores cover">
</div>