<div id="left-sidebar">

<ul>

<li id="sidebar-item1">Sidebar item 1</li>

<li id="sidebar-item2">Sidebar item 2</li>

<li id="sidebar-item3">Sidebar item 3</li>

</ul>

</div>

The class identifier

The class identifier, like the id identifier, is used for naming our content; however, where ids are used for unique pieces of content, classes are used for elements of a similar nature. They are a used as a way to ensure consistency between these elements. By labelling similar elements with the same class, we are able to select multiple elements at the same time. Let’s continue our above example of the left sidebar. Let’s assume that we want our three sidebar items to look identical, just with different content; we might want to give our items a class to share so that we can target the three items at the same time. This becomes very powerful when styling the divs as we don’t have to repeat the styling process for each div individually (more on styling in the next chapter). Just like the id identifier, it is an attribute, and is assigned as such. Let’s see our sidebar item example again, but this time using classes.