CSS for nested lists – there has got to be a better way

August 16, 2022

Okay, so because when HTML was invented back in ancient Greece we got two separate tags for lists depending on whether they’re ordered <ol> or unordered <ul>… today my CSS looks jacked. Does ordered vs unordered matter semantically? I would argue that it does not, especially since we can change the appearance with CSS anyway. But alas, we were not blessed with a <list> tag or something effectively the same (and come to think of it, it’s kind of depressing that after all these years we still don’t have one list tag to rule them all).

So today I’m styling some nested lists, and since I can’t do this:

list list list {}

To get at the third level of indentation, taking into account every possible combination of <ol> and <ul>, I have this:

ul ul ul,
ul ul ol,
ul ol ul,
ol ul ul,
ul ol ol,
ol ol ul,
ol ul ol,
ol ol ol {}

You can see how for each indentation level that is added, the situation gets exponentially awful.

Is this really the only way to code for this, or… what do you clever people do in a case like this? Thanks.

@keyframes rainbow { 
  0%{background-position:0% 50%}
  50%{background-position:100% 25%}
  100%{background-position:0% 50%}
}
.justwhy  {
  font-size: 24px;
  font-family: monospace;
}
.justwhy ul ul ul,
.justwhy ul ul ol,
.justwhy ul ol ul,
.justwhy ol ul ul,
.justwhy ul ol ol,
.justwhy ol ol ul,
.justwhy ol ul ol,
.justwhy ol ol ol {
  background-image: repeating-linear-gradient(45deg, violet, indigo, blue, green, yellow, orange, red, violet);
  background-size: 800% 800%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: rainbow 0.5s infinite;
}

<div class="justwhy">
    <ul>
        <li>this</li>
            <ul>
                <li>is</li>
                    <ul>
                        <li>horrible ヾ( ◞ิ👅◟ิ )ﾉﾞ</li> 
                    </ul>
            </ul>
    </ul>
</div>

>Solution :

Unless you need to target IE (in which case, my condolences), you can use the :is pseudo-class (or :where depending on specificity needs):

@keyframes rainbow { 
  0%{background-position:0% 50%}
  50%{background-position:100% 25%}
  100%{background-position:0% 50%}
}
.justwhy  {
  font-size: 24px;
  font-family: monospace;
}
.justwhy :is(ul, ol) :is(ul, ol) :is(ul, ol) {
  background-image: repeating-linear-gradient(45deg, violet, indigo, blue, green, yellow, orange, red, violet);
  background-size: 800% 800%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: rainbow 0.5s infinite;
}

<div class="justwhy">
    <ul>
        <li>this</li>
            <ul>
                <li>is</li>
                    <ul>
                        <li>horrible ヾ( ◞ิ👅◟ิ )ﾉﾞ</li> 
                    </ul>
            </ul>
    </ul>
</div>