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:

1. 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.
2. Is it possible to extend, in a possibly simple way, the color background and borders to the list item number?
3. 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.

Answer 1

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.

Answer 2

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>