Dynamically assign a CSS class from within CSS

Question

Is it possible to dynamically assign a class to an existing class? I am trying to allocate a style to the first child like this:

.active {
  color: red;
}

item:first-child .item_text {
  background: rgba(255, 255, 255, 1);
  /* make it active class */
}

Stephan Muller · Accepted Answer · 2014-09-27 00:49:06Z

3

No, this is simply not possible with just CSS.

The best you could do:

.active,
item:first-child .item_text {
  color: red;
}

item:first-child .item_text {
  background: rgba(255, 255, 255, 1);
}

It is possible if you used a CSS preprocessor like LESS or SASS, which among others extend CSS with functionality like including/extending classes.

In LESS

item:first-child .item_text {
  background: rgba(255, 255, 255, 1);
  .active;
}

This would literally replace that classname with the color: red; line.

In SASS (from version 3, which uses the "SCSS" syntax):

item:first-child .item_text {
  background: rgba(255, 255, 255, 1);
  @extend .active;
}

This would render the same output as my CSS example above.

answered Sep 27, 2014 at 0:22

Stephan Muller

27.7k18 gold badges87 silver badges127 bronze badges

Sign up to request clarification or add additional context in comments.

1 Answer 1