Bjorkson
Bjorkson

Reputation: 671

How to handle an id tag with '.' in CSS

My problem is that I don't have the HTML code to change the id's to remove the '.'...

Is it possible to handle such id's, lets say:

<td id='my.id'>

In the CSS file to do something like:

#[my.id]{ ... }

I know this doesn't work (that's more access approach), but I wonder if there's a syntax for this in CSS?

Upvotes: 1

Views: 351

Answers (5)

Kyle
Kyle

Reputation: 67194

Use a backslash before the dot:

#my\.id
{
    color: red;
    border: 1px dashed #f00;
}

Example here for you :)

Upvotes: 0

Ryan Miller
Ryan Miller

Reputation: 391

This, surprisingly to me, works. I have only tested this in Chrome.

<style>
#my\.id {
 color:red;
} 
</style>

Upvotes: 1

Nivas
Nivas

Reputation: 18344

Use "\" to escape special characters.

For

        <div id="id.id">Red Color</div>

Use

        #id\.id
        {
            color: red;
        }

This question is perhaps related.

Upvotes: 1

Nikoloff
Nikoloff

Reputation: 4160

Try #my\.id it the CSS.

I'm not sure if it works on all browsers though. I'd recommend avoiding dots in id's

Upvotes: 1

GorillaMoe
GorillaMoe

Reputation: 4134

It is not allowed to use a DOT in a selector as far as I know :)

Upvotes: -2

Related Questions