<div id="left-sidebar">

<ul>

<li id="left-sidebar-item1" class="sidebar-item first-list-item">

Sidebar item 1

</li>

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

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

</ul>

</div>

<div id="right-sidebar">

<ul>

<li id="right-sidebar-Item1" class="sidebar-item first-listitem">

Sidebar item 1</li>

<li id="right-sidebar-Item2" class="sidebar-item first-listitem">

Sidebar item 2</li>

<li id="right-sidebar-Item3" class="sidebar-item first-listitem">

Sidebar item 3</li>

</ul>

</div>

As you can see from our above example we have given the same ‘first-list-item’ class to the first list-items in each of our sidebar lists. We can now use the ‘first-list-item’ class to target all of the first list-items on our webpage, or we can use the ‘sidebarItem’ class to target all of our list-items. Alternatively we could use any of their ids to target them on an individual level. This is a very powerful function of ids and classes, which allow us complete flexibility in how granular or general we want to be in our targeting. You will also notice how the classes are separated by a single space. This is important: never use commas, semi-colons or any other delimiters here. A simple space is enough to separate our classes.