| title | category | date | topics |
|---|---|---|---|
Avoid to use colons and periods in the id attribute |
Best practice |
2021-02-23 09:54:00 +7 |
DOM, HTML |
According to the HTML specifications, a valid id can consist of almost characters except ASCII whitespace.
Assume that we have an element representing an user's email address:
<div id="user.email" />In order to access the element, the getElementById() method accepts all of three ways passing the id:
// They return the same element
document.getElementById('user.email');
document.getElementById('user\\.email');
document.getElementById('user\\\\.email');But these methods return different results if you are using jQuery library:
// Function // Returned element
$('#user.email'); // <div id="user" class="email" />
$('#user\\.email'); // <div id="user" class="email" />
$('#user\\\\.email'); // <div id="user.email" />As you see, the first two methods will find an element with id of user and has email class.
In order to get the correct element, we have to escape the id using double backslashes (\\). It also happens if we use the same value in CSS:
#user.email {
...;
}All the styles declared within #user.email { ... } has effect on the element with id of user and has the email class.
The styles aren't applied to element with id of user.email. To define the styles for our element, we have to escape the selector.
But this time, it requires a single backslash only:
#user\\.email {
...;
}Avoid using the special characters in the id and class attributes will help us get rid of the confusion and errors above.
If it's not possible to get rid of colons and periods (for example, the id attribute is generated by the server side), then you can use the single backslash as above, or use the attribute selector.
Note that it has a lower specificity than the id selector:
[id='user.email'] {
...;
}