Before proceeding to CSS id selector, I’ll advice you to read CSS tutorial for beginners, CSS Properties and Values and CSS Selectors first. If you have already read, then we’re good to proceed.

Introduction to css id selector

As we are familiar with the Term “id” which we use for identification. That is no different in CSS. The webpage is a collection of HTML elements put together. But often when styling, we need to Style a particular Element. And that style is unique to that element only. Thats when CSS id Selector comes in use.

Usage:

CSS id selector can be used by prefixing the id name with a ‘#’ “Hash” or “Pound” sign with the id string. The id string can should be a single word. If it has to be multiple words then it must be separated with a ‘-‘ or ‘_’ but there should be no white spaces in between words.

#uniqueid{
   property:value;
   property:value;
}

Example  of CSS ID is explained in detailed below :

See the Pen Understanding CSS id by The SuperKat (@thesuperkat) on CodePen.

So as we see in the example above, we have two elements with id’s specified. And so we used this id to style those elements differently without any problems. And all the thanks goes to CSS Id Selector.

It doesn’t matter where your element is in your webpage, nested or not, css id selector  can reach the element.

Please Note : 

You might find out that by supplying more than one elements the same id and styling that particular id will style them all. But that will not be recommended. Because though it will work on css. But when you make a professional webpage, you need to follow all these rules very deeply. Because When you use id to target HTML element in javascript, it’s gonna only target the first encountered element with the id, all others with the same id will be ignored. So be careful how you use it.

Next Step : CSS .class selector

Related Links :

• CSS * selector
• CSS element selector

The post CSS id selector appeared first on The Superkat.