string concatenation in css

css, html

Solution

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.

Problem

I want to achieve the following in css. How do i do it in a cross browser way? ``` url('../img/icons/' + attr('type') + '_10.png') ```

Original source

Related problems