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,
#wwctrl_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):