Question

‘#‘ is the the ID selector, a fundamental part of the CSS language. It matches the HTML element with the given id. I know it but what is the main differences between using .classname {...} or #idselector in a .css file.

.hello { color:000000;}

or

#hello { color:000000;}

Answer 1

Precedence. IDs have a higher precedence then class selectors. If you had the following CSS:

.hello { color:#000000;}
#hello { color:#ff0000;}

Assuming the same element had the ID of ‘hello’ and class of ‘hello’ the font color of that element would be red since the ID has a higher precedence then the class selector.

Also, you can only have one element with the ID of ‘hello’ on a page. But you can have an unlimited number of elements with the class of ‘hello’.