I want the second level ols to have uppercase alpha list styling and the first level ols to have uppercase Roman. I tried using the child combinator, and I assumed that the more specific styling would override the less specific styling, but that doesn't seem to be the case. This is for an assignment, so I can't change the HTML to give the first level ol an ID. It has to be done through the CSS. I assume there's something I'm missing here about how the child combinator works.
#outline > ol {
line-height: 2em;
margin: 0px 5px;
list-style: upper-roman;
}
#outline > ol > ol {
list-style: upper-alpha;
}
<nav id="outline">
<h1>Course Outline</h1>
<ol>
<li>
<a href="#">The Road to War</a>
<ol>
<li><a href="#">Planting the Seeds</a></li>
<li><a href="#">The First Crisis</a></li>
<li><a href="#">Compromise & Failure</a></li>
<li><a href="#">Fault Lines</a></li>
</ol>
</li>
<li>
<a href="#">Politicians & Generals</a>
<ol>
<li><a href="#">The Election of 1860</a></li>
<li><a href="#">Politicians</a></li>
<li><a href="#">Generals</a></li>
<li><a href="#">The Election of 1864</a></li>
</ol>
</li>
<li>
<a href="#">The Course of War</a>
<ol>
<li><a href="#">The Anaconda Plan</a></li>
<li><a href="#">The Eastern Campaign</a></li>
<li><a href="#">The Western Campaign</a></li>
<li><a href="#">1861-1862</a></li>
<li><a href="#">1863</a></li>
<li><a href="#">1864-1865</a></li>
</ol>
</li>
<li>
<a href="#">Aftermath</a>
<ol>
<li><a href="#">Lincoln Assassination</a></li>
<li><a href="#">Reconstruction</a></li>
<li><a href="#">A New Constitution</a></li>
<li><a href="#">The United States Is ...</a></li>
</ol>
</li>
</ol>
</nav>
CodePudding user response:
There's an li
in the middle. So when using the immediate child selector >
need to consider it.
#outline>ol {
line-height: 2em;
margin: 0px 5px;
list-style: upper-roman;
}
#outline>ol>li>ol {
list-style: upper-alpha;
}
<nav id="outline">
<h1>Course Outline</h1>
<ol>
<li>
<a href="#">The Road to War</a>
<ol>
<li><a href="#">Planting the Seeds</a></li>
<li><a href="#">The First Crisis</a></li>
</ol>
</li>
<li>
<a href="#">Politicians & Generals</a>
<ol>
<li><a href="#">The Election of 1860</a></li>
<li><a href="#">Politicians</a></li>
</ol>
</li>
</ol>
</nav>