<div id="left-sidebar">

<ul>

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

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

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

</ul>

</div>

This is a very powerful technique as it allows us to now target all of the items at once using the class ‘sidebar-item’, or on an individual level using their unique id.

One last important concept to understand about classes is that we can apply multiple classes to the same element. This allows us to assign elements to multiple different ‘groups’ that we can target. For example, we might want to be able to select the first item of every list across the whole website, so that we can increase its font size. For this we would assign the same class to the first item of each list, which would allow us to target every first list element at the same time. Continuing our example, let’s see how this looks: