<div id="left-sidebar">

<ul>

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

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

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

</ul>

</div>

As you can see, the three items all share the exact same class, despite having different content. This is absolutely fine, as the class simply states that the content is of the same type, not that it is identical. You might also notice that we have nested our classes inside of a main div with an id. This is absolutely fine too – we can nest ids inside classes and vice versa without any issues.

Not only can we nest ids and classes within one another, we can also apply an id and classes to the same item. Let’s see this in action …