Search code examples
htmlcssstylesheet

How to pull specific styles from a stylesheet class HTML

I have an assignment which has a part where I need to create a simple ordered list using an "outline" class from the included style sheet. Additionally I need an ordered list with just the default style..

This is what I have so far, however no matter what I change the style to both of the lists remain numbered with Roman numerals.. I think my syntax is off somehwere but cannot find a solution online.

<!DOCTYPE html>
<html lang="en">

  <head>
    <meta charset="UTF-8">
    <title>Assignment 1 - First Page</title>
    <link rel="stylesheet" type="text/css" media="screen" href="assignment1-style.css">
  </head>

  <body>
    <h3>Sports</h3>
    <dl>
      <dt>Football</dt>
      <dd>Most Popular Sport in America</dd>
      <dt>Soccer</dt>
      <dd>Most Popular Sport Worldwide</dd>
      <dt>Ping Pong</dt>
      <dd>A Very Underrated Sport</dd>
    </dl>
    <h3>Cities</h3>
    <ol>
      <li>Atlanta</li>
      <li>New York</li>
      <li>Los Angeles</li>
      <ol type="a" start="4">
        <li>Nashville</li>
        <li>Charlotte</li>
        <li>Oklahoma City</li>
      </ol>
    </ol>
    <h3>The Best Quarterbacks of All Time</h3>
    <ol class="outline" type="A">
      <li>Peyton Mannning</li>
      <li>Tom Brady</li>
      <li>Joe Montana</li>
      <li>Dan Marino</li>
      <ol class="outline" start="5">
        <h4>Second Tier</h4>
        <li>Steve Young</li>
        <li>Warren Moon</li>
        <li>Terry Bradshaw</li>
      </ol>
    </ol>

    <h5><a href="second.html">Part Two of this Assignment</a></h5>
    <h5><a href="https://en.wikipedia.org/wiki/Football">More Reading on Football</a></h5>
    <p>This is a paragraph</p>
  </body>

</html>

This is the relevant part of the stylesheet.

    ol > li {
  list-style-type: upper-roman;
  color: #00f5ff;
  /* turquoise1 */
}

ol > li > ol > li {
  list-style-type: upper-alpha;
  color: #00c5cd;
  /* turquoise3 */
}


/* outline line style lists */

ol.outline > li {
  list-style-type: upper-roman;
  color: #ff3e96;
  /* VioletRed1 */
}

ol.outline > li > ol > li {
  list-style-type: upper-alpha;
  color: #f0f;
  /* Magenta */
}

ol.outline > li > ol > li > ol > li {
  list-style-type: decimal;
}

ol.outline > li > ol > li > ol > li > ol > li {
  list-style-type: lower-alpha;
}

ol.outline > li > ol > li > ol > li > ol > li > ol > li {
  list-style-type: lower-roman;
}

ol.outline > li > ol > li > ol > li > ol > li > ol > li > ol > li {
  list-style-type: lower-greek;
}

If I were to change the style of the that has the outline class to lower-alpha or another one, shouldn't the numbering of the lists change?

Solution

  • Remember that > means nested, while + means peer/equal

    ol > li {
  list-style-type: upper-roman;
  color: #00f5ff;  /* turquoise1 */
}

ol > li > ol > li {
  list-style-type: upper-alpha;
  color: #00c5cd;  /* turquoise3 */
}

/* outline line style lists */
ol.outline > li { /* PeytonM, TomB, JoeM, DanM */
  list-style-type: upper-roman;
  color: purple;  /* VioletRed1 */
}

ol.outline > li + ol > li { /* SHOULD BE + ol not > ol */
  list-style-type: upper-alpha;
  color: #f0f;  /* Magenta */
}

ol.outline > li > ol > li > ol >  li {
  list-style-type: decimal;
}


ol.outline > li > ol > li > ol > li > ol > li {
  list-style-type: lower-alpha;
}

ol.outline > li > ol > li > ol > li > ol > li > ol > li {
  list-style-type: lower-roman;
}

ol.outline > li > ol > li > ol > li > ol > li > ol > li > ol > li {
  list-style-type: lower-greek;
}
    <h3>Sports</h3>
<dl>
  <dt>Football</dt>
  <dd>Most Popular Sport in America</dd>
  <dt>Soccer</dt>
  <dd>Most Popular Sport Worldwide</dd>
  <dt>Ping Pong</dt>
  <dd>A Very Underrated Sport</dd>
</dl>
<h3>Cities</h3>
<ol>
  <li>Atlanta</li>
  <li>New York</li>
  <li>Los Angeles</li>
  <ol type="a" start="4">
    <li>Nashville</li>
    <li>Charlotte</li>
    <li>Oklahoma City</li>
  </ol>
</ol>
<h3>The Best Quarterbacks of All Time</h3>
<ol class="outline" type="A">
  <li>Peyton Mannning</li>
  <li>Tom Brady</li>
  <li>Joe Montana</li>
  <li>Dan Marino</li>
  <ol class="outline" start="5">
    <h4>Second Tier</h4>
    <li>Steve Young</li>
    <li>Warren Moon</li>
    <li>Terry Bradshaw</li>
  </ol>
</ol>

<h5><a href="second.html">Part Two of this Assignment</a></h5>
<h5><a href="https://en.wikipedia.org/wiki/Football">More Reading on Football</a></h5>
<p>This is a paragraph</p>