string concatenation in css

Question

I want to achieve the following in css. How do i do it in a way that works in IE8+

url(\'../img/icons/\' + attr(\'type\') + \'_10.png\')

Answer 1

No, you can't do this in plain CSS because the CSS language hasn't control structures or anything like that wich will allow you to dinamically generate CSS code.

Instead, you can use a javascript solutions or a solution based on CSS variables coded in PHP.

Answer 2

You can't do dynamic string interpolation in the way that you're suggesting, but if you have a limited number of possible values for the [type] attribute, you could create styles for each one:

.your .selector[type="foo"] {
    background-image: url('../img/icons/foo_10.png');
}
.your .selector[type="bar"] {
    background-image: url('../img/icons/bar_10.png');
}
.your .selector[type="baz"] {
    background-image: url('../img/icons/baz_10.png');
}

If you've got an unreasonable number of types, then you'll probably need to come up with a better solution than I've listed here.

Answer 3

I don't think you can. In the content property you can "concatenate" just by separating with a space, but in other places I don't think there is such a feature. Which is a shame.

You'll probably be best off specifying this style in a style attribute whenever the type attribute is used.

Answer 4

CSS performs concatenation without using any operator (e.g. +, &, etc). Keep your strings in quotes combine the strings, attr, var, etc into one line.

Examples:

• url('not/very' '/useful/concatenation'); // not/very/useful/concatentation
• url('../img/icons/' attr('type') '_10.png'); //../img/icons/${type}_10.png
• url(attr('href') '#hash'); // https://${href}/#hash
• url(var(--hello) ' world'); // Hello World