Search code examples
htmlcsscss-selectorsspecial-characters

How can I target an id="last_name[]_field" with css

I am using a plugin for wordpress, and the developer created the ID using the [] characters in the name.

I can't seam to figure out how to target them with css...

<p id="shipping_city[]_field">stuff</p>

so i try 

#shipping_city[]_field {font-size:24px;}

or something.. and no luck.

has anyone run into this type of thing before?

I don't want to change the developers html because this is for a form entry, and I think the [] serves a purpose...

Solution

  • You have to escape special characters - see Link

    The following characters have a special meaning in CSS: !, ", #, $, %, &, ', (, ), *, +, ,, -, ., /, :, ;, <, =, >, ?, @, [, \, ], ^, `, {, |, }, and ~.

    There are two options if you want to use them. Either you use the Unicode code point — for example, the plus sign (+) is U+002B, so if you would want to use it in a CSS selector, you would escape it into \2b (note the space character at the end) or \00002b (using exactly six hexadecimal digits).

    The second option is far more elegant though: just escape the character using a backslash

    #shipping_city\[\]_field {
  font-size: 24px;
  color: red;
}
    <p id="shipping_city[]_field">stuff</p>