Style only the first level of a nested list

Question

I would like to achieve a simple effect of enlarging font size and adding color borders and background in top-level li elements of a list, without influencing lower nested levels (sub-lists). These four questions and answers are related, but do not answer my questions below.

Target first level <li>s and not the nested <li>s
Style first level of menu only
Style only first level of unordered list
styling a nested list in CSS

Here is the minimal example:

ol.toplevel > li {
 font-size: 160%;
 margin-bottom: 0.5em;
 margin-top: 1.5em;
 padding-bottom: 0.2em;
 padding-top: 0.1em;
}

ol.toplevel div.topleveltitle {
 background-color: yellow;
 border-bottom: 1px solid red;
 border-top: 1px solid red;
 color: red;
}

ol.toplevel li li {
 /*For lower nested levels, we don't want to inherit any top-level settings*/
 all: revert; /*does not seem to work at all, "unset" neither*/
 font-size: 70%; /*undo 160%, but we don't want to propagate 70% to lower levels!*/
}

<ol class="toplevel">
    <li><div class="topleveltitle">First title</div></li>
    <li><div class="topleveltitle">Second title</div>
        <ol>
            <li>Subitem</li> 
            <li>Subitem</li> 
            <li>Subitem</li> 
            <li>Subitem</li> 
        </ol>
    </li>
    <li>Third title
        <ul>
            <li>Subitem
            <ol>
                 <li>Subsub</li>
                 <li>Subsub</li>
            </ol>            
            </li> 
        </ul>
    </li>
</ol>

After so many years of css development, I would hope that this simple goal can be achieved in a simple, concise and elegant way – without tricks, hacks and redundancy. So here are the specific questions regarding this example:

Is it possible to avoid introducing helper <div> or <span> along with topleveltitle, and use css to only define style for the top-level <ol> to affect each top-level <li> text without influencing the contents of nested sub-lists? It would work if the </li> closing tag was placed immediately after the titles, but then it would be invalid html because, per html specs, the closing tag must be placed after nested sub-lists as in the example.
Is it possible to extend, in a possibly simple way, the color background and borders to the list item number?
Is it possible to avoid all this complexity of preventing inheritance of styles from top level to lower levels of nesting? "revert" does not work as used, and I don't want to explicitly enumerate and set all the properties modified in top-level for lower levels, especially given that their values may be unknown because they themselves may be inherited or dependent on user/browser settings. I would rather want to affect only toplevel instead of affecting all levels and then enumerating exceptions or redefining values for lower levels.

have you considered making them siblings to another `li` that contains the children? Alternatively, it's hard to say because I don't know the content, but depending on the semantics [`
`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/dd) may be a good fit — soulshined, Nov 23 '19 at 23:52
@soulshined ``
`` and ``
`` are not suitable for this use-case... The current approach with nested lists is perfectly suitable (and I have a huge complicated list, this is just a minimal example), I just have a problem with very simple styling as described. Regarding "making them siblings to another ``li`` that contains the children", I don't understand what should be made siblings, but this sounds to me like creating artificial/redundant structure/items in order to help with the css. — dolphin, Nov 25 '19 at 03:04
html is inherently redundant so what's the burden of typing 1 more simple tag if it's semantically correct and provides a solution, something that answers all of your questions? — soulshined, Nov 25 '19 at 03:30
@soulshined html is inherently redundant? only in syntax, and even that, given its assumptions, is not really redundant unless you are counting characters. "what's the burden of typing 1 more simple tag" – it is just not right to spoil the proper structure by introducing unnecessary elements just to make it easier to make it "look better" by using convoluted rules relying on the existence of those unnecessary elements. Also, in the real usage scenario you have a structure with a hundred nested items and many nesting levels. — dolphin, Nov 27 '19 at 16:54
"not right to spoil the proper structure"...being semantically correct is proper structure; I don't think we are on the same page. The solution I recommended is commonly used for things akin to 'pure' CSS drop-down menus. If you don't think it fits your needs that's fine, too each their own. I was just elaborating so future readers understand there are alternatives that address this in a semantic-friendly way, with little effort, in lieu of javascript. cheers — soulshined, Nov 27 '19 at 17:08
@soulshined I appreciate the idea you mentioned, but is introducing redundant items that do not exist in the actual data, and will be hidden because end users must not see them, "semantically correct"? I am surprised you see it this way, because (cite) "Semantically correct usage of elements means that you use them for what they are meant to be used for". And I think ``
It is semantically correct. In fact, I would even argue it can be more semantically favored because li [permitted content](https://html.spec.whatwg.org/multipage/grouping-content.html#the-li-element) is flow content (which includes h1,h2 etc) How is it empty or invisible if it contains the `topleveltitle` content? I never implied empty/redundant, these were your assumptions which is why im certain we’re not on the same page. I dont know how I got you there I just asked if you considered making them siblings to the children. Its still a correct way to do it; Im not saying its *the* way — soulshined, Nov 29 '19 at 06:43
@soulshined This is why I said in my first answer "I don't understand what should be made siblings, but this sounds to me like creating artificial/redundant structure/items in order to help with the css". You didn't deny that and answered "html is inherently redundant so what's the burden of typing 1 more simple tag" – like "html is already a mess, what's the problem with adding a bit more". Since in my example code the number of ``

Jon B · Answer 1 · 2019-11-25T05:19:03.580

Does achieve do what you are trying to do?

ol {
  counter-reset: my-awesome-counter;
}
ol li {
  font-size: 1rem;
  color: black;
  list-style: none;
  counter-increment: my-awesome-counter;
}
ol li::before {
  content: counter(my-awesome-counter) ". ";
  width: 2rem;
}
ol.toplevel > li::before {
  background-color: yellow;
  border-bottom: 1px solid red;
  border-top: 1px solid red;
  color: red;
}
ul > li::before {
  content: ''
}
ol.toplevel > li {
  font-size: 1.8rem;
  margin-bottom: 0.5em;
  margin-top: 1.5em;
  padding-bottom: 0.2em;
  padding-top: 0.1em;
}
ol.toplevel > li span {
  display: inline-block;
  width: calc(100% - 2rem);
  background-color: yellow;
  border-bottom: 1px solid red;
  border-top: 1px solid red;
  color: red;
}

<ol class="toplevel">
    <li><span>First title</span></li>
    <li><span>Second title</span>
        <ol>
            <li>Subitem</li> 
            <li>Subitem</li> 
            <li>Subitem</li> 
            <li>Subitem</li> 
        </ol>
    </li>
    <li><span>Third title</span>
        <ul>
            <li>Subitem
            <ol>
                 <li>Subsub</li>
                 <li>Subsub</li>
            </ol>            
            </li> 
        </ul>
    </li>
</ol>

It uses custom list numbers by adding a counter and hiding the default numbers.

This looks almost good, unfortunately top and bottom borders around the list number do not match the borders around the titles (there is one or more pixels of difference, depending on zoom). I hoped that this simple goal could be achieved in a much simpler and elegant way (your solution uses ``calc()`` and duplicates definitions of colors and borders). Even for this, my three questions would be answered as: 1) no way to avoid introducing another element within ``

Haq Nawaz · Answer 2 · 2019-11-24T22:53:39.867

0

Try this, Use topleveltitle class for third title. As you already defined it.

  <ol class="toplevel">
    <li><div class="topleveltitle">First title</div></li>
    <li><div class="topleveltitle">Second title</div>
        <ol>
            <li>Subitem</li>    
            <li>Subitem</li>    
            <li>Subitem</li>    
            <li>Subitem</li>    
        </ol>
    </li>
    <li><div class="topleveltitle">Third title</div>
        <ul>
            <li>Subitem
            <ol>
                 <li>Subsub</li>
                 <li>Subsub</li>
            </ol>            
            </li>   
        </ul>
    </li>
</ol>

edited Nov 24 '19 at 22:53

answered Nov 24 '19 at 00:29

Haq Nawaz

412
1
4
12

I tested your solution on Firefox and Edge. It makes the "First" item larger, while everything else (including "Second" and "Third" top-level items) remains at normal size. – dolphin Nov 24 '19 at 11:51
You mean the only difference in your updated solution #2 is to add class="topleveltitle" for the third title? I left that out intentionally. Please read again my three questions, as your current solution does not address any of them... (still thank you for the attempts!) – dolphin Nov 25 '19 at 02:50

Style only the first level of a nested list

2 Answers2