Using brackets () in CSS

I'm working with a payment service that generates a bunch of code in the templates I make. The thing is that they use brackets "()" when naming some of their divs. This causes a problem for me as I have to style all generated divs and the CSS don't like divs named with a bracket.

Their code:

<div id="wwctrl_paytypeLogo_AMEX">
<div id="wwctrl_paytypeLogo_AMEX(SE)">
<div id="wwctrl_paytypeLogo_AMEX(DK)">

My CSS:

#wwctrl_paytypeLink_MTRO button { background: url(images/icon_pay_maestro.png) 265px 50% no-repeat; }
#wwctrl_paytypeLink_AMEX button,
#wwctrl_paytypeLink_AMEX(SE) button,
#ww开发者_JAVA百科ctrl_paytypeLink_AMEX(DK) button { background: url(images/icon_pay_amex.png) 265px 50% no-repeat; }

Is there anything I can do to have the CSS applied to the divs named using ()?

The main issue is that ( brackets ) aren't valid characters to use in ID attributes. See the spec.

But if you can't change the IDs, you can always use backslashes (\) to escape the brackets in your selectors (as they otherwise function as special pseudo-class characters):

#wwctrl_paytypeLink_AMEX\(SE\) button,
#wwctrl_paytypeLink_AMEX\(DK\) button { background: url(images/icon_pay_amex.png) 265px 50% no-repeat; }

The () characters are invalid for HTML ID attributes.

What are valid values for the id attribute in HTML?

You need to change your cracket characters with something else, or remove them entirely. I'd advise reading the top rated answer to that question, as there are other characters that, while valid, could still lead to problems.