CSS Id Selector

The best practice in CSS is to gather all style informations to a separated document(s), called stylesheet(s). The meaning is obvious. We want to separate style from content and vice versa. To make this possible, it’s necessary to address individual elements or individual groups of elements in html document. Selectors do the addressing and in CSS, we have more selectors that cover all webdesigner needs. First of all, we will take a closer look on id selectors.

How do id selectors work?

We use id selectors to address unique elements. That said, we will be accessing one exact element. For example:

<div id="box">
   <div id="box2">
   </div>
</div>

#box {
   width: auto;
}
#box2 {
   width: 2em;
}

If you want to match more elements with the same rules, you should use class selector, instead of id selector.