How can I style a second level child differently than a first level child?-CodePudding

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 &amp; Failure</a></li>
            <li><a href="#">Fault Lines</a></li>
          </ol>
        </li>
        <li>
          <a href="#">Politicians &amp; 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 &amp; Generals</a>
      <ol>
        <li><a href="#">The Election of 1860</a></li>
        <li><a href="#">Politicians</a></li>
      </ol>
    </li>
  </ol>
</nav>