Using brackets () in CSS

Question

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 ()?

`()` are not allowed in IDs: http://www.w3.org/TR/html4/types.html#type-id — Felix Kling, Apr 14 '11 at 07:49
It seems to work, even though it's not allowed. See http://jsfiddle.net/DLbWH/ — Ragnar123, Apr 14 '11 at 07:52
That's not going to work, since brackets are simply not allowed at that position. — Rhapsody, Apr 14 '11 at 07:53
@Ragnar123: You should edit your comment to say that the brackets are escaped in your fiddle. — BoltClock, Apr 14 '11 at 07:53

BoltClock · Accepted Answer · 2011-04-14T07:54:05.453

6

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; }

edited Apr 14 '11 at 07:54

answered Apr 14 '11 at 07:48

BoltClock

700,868
160
1,392
1,356

The years roll on and most characters (including parentheses) are now valid in IDs - in HTML5 – Nick Rice May 07 '16 at 16:59

score 1 · Answer 2 · edited May 23 '17 at 12:26

1

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.

edited May 23 '17 at 12:26

Community

1
1

answered Apr 14 '11 at 07:52

GordonM

31,179
15
87
129

I know the () characters are invalid for use in HTML ID attributes. Unfortunately I can't change this as it's generated by a payment service provider that's used by a large amount of websites in Scandinavia. I've sent an e-mail to the SP but I doubt they will do anything about it. – Walker Apr 14 '11 at 08:01
I suppose if you're really desperate you could try div[id="wwctrl_paytypeLogo_AMEX(SE)"] but I couldn't vouch for page rendering performance, and it would only work in browsers that support CSS3 selectors – GordonM Apr 14 '11 at 08:16

Using brackets () in CSS

2 Answers2