If you spend any time writing CSS styles, I have no doubt that sooner or later, you will have come across instances where your code contains selectors or classes that go several levels deep. What do I mean by this? Well, let me explain.
Take, for example, a navigation bar. This has been around for years – it’s a basic staple of websites, although how we decide to skin it will differ between sites. However, the basic principle uses unordered lists, which can go several levels deep:
<nav>
<li>
<a href="#">Heading 1</a>
<ul>
<li><a href="#">Test link</a></li>
<li><a href="#">Test ...
