Двоеточие в идентификаторе css селектора

Опытным путем нащупал отличия в работе методов document.getElementById() и document.querySelector()
Был в DOM-е элемент с идентификатором layout:rightcol
<div id="layout:rightcol"></div>

Так для него document.getElementById('layout:rightcol') вернет правильный элемент, а для
document.querySelector('#layout:rightcol') и $('#layout:rightcol') будет получено исключение

chrome 40: DOMException: Failed to execute 'querySelectorAll' on 'Document': '#layout:rightcol' is not a valid selector.
firefox 35: SyntaxError: An invalid or illegal string was specified