Question

I am inserting an image into a div container with css like this:

.ft-folder-closed:before {
    content: url('../ll-filetree/img/ft-plus.16.png');
}

I want apply some css attributes to that image without listing them in the together with the “content” attribute, but apply a nother style to it, to reduce CSS overhead. Something like this, but that of course does not work:

.ft-folder-closed:before {
    content: url('../ll-filetree/img/ft-plus.16.png');
    inherit: ft-floder-icon;
}

Any chance to do that?

Answer 1

You can group your CSS selectors to apply the same styles on multiple elements. This allows you to apply the same styles to multiple elements without repeating the styles.

Example:

.ft-folder-icon, .ft-folder-closed:before {
     color: red;
}

This will apply the color: red; style to both the .ft-folder-icon elements and the .ft-folder-closed:before pseudo-elements.

If you decided to use a CSS pre-processor like LESS you could abstract your CSS using “mixins” similar to this:

.ft-folder-closed:before{
     .ft-folder-icon;
}

Using “mixins” you can embed all of the properties of a class into another class just by including the class name as one of its properties. It’s very similar to variables, but for entire classes.