<h1>The Wives of Henry the Nth-child(8)</h1>
<dl>
  <dt>Catherine of Aragon</dt>
  <dd>
    <ul>
      <li>11 June 1509 – 23 May 1533</li>
       <li><div><span class="plain-font"> fate:</span></div> </li>
    </ul>
  </dd>
  <dt>Anne Boleyn</dt>
  <dd><ul>
      <li>28 May 1533 – 17 May 1536</li>
       <li><div><span class="plain-font"> fate:</span></div> </li>
    </ul></dd>
  <dt>Jane Seymour</dt>
  <dd>
    <ul>
      <li>30 May 1536 – 24 October 1537</li>
      <li><div><span class="plain-font"> fate:</span></div> </li>
    </ul>
  </dd>
  <dt>Anne of Cleves</dt>
  <dd>
    <ul>
      <li>6 January 1540 – 9 July 1540</li>
      <li><div><span class="plain-font"> fate:</span></div> </li>
    </ul>
  </dd>
  <dt>Catherine Howard</dt>
  <dd>
  <ul>
    <li>28 July 1540 – 23 November 1541</li>
     <li><div><span class="plain-font"> fate:</span></div> </li>
    </ul>
  </dd>
  <dt>Catherine Parr</dt>
  <dd>
   <ul>
    <li>12 July 1543 – 28 January 1547</li>
    <li><div><span class="plain-font"> fate: </span></div> </li>
    </ul>
  </dd>
  
  
</dl>

$font: 'Roboto','Gill Sans', sans-serif;
$divorced-font: 'Calligraffitti', 'Impact', cursive;
$beheaded-font: 'Sedgwick Ave','Chalkduster', cursive;
$survived-font: 'Reenie Beanie','Snell Roundhand', cursive;
$died-font:'Lakki Reddy','Chalkduster', cursive;
$died-color: #721121;
$lived-color:#113172;
html {
  font-family:$font;
  font-size: 16px;
   box-sizing: border-box;
   padding: 1.25em 1.25em 0;
  background: #e3d8c0;
  @media screen and (min-width: 900px) {
    font-size: 18px;
  }
  @media screen and (min-width: 1200px) {
    font-size: 20px;
  }
}

*, *:before, *:after {
  box-sizing: inherit;
}

h1, dt{
  font-family: $font;
}
h1{
  font-size: 1.75em;
}
dt{
  font-size: 1.2em;
  margin:0.5em 0 0.25em;
}
li{
  margin-bottom: 0.25em;
  margin-left: 0.5em;
  display:block;
 

  div {
    height:2em;
    span.plain-font{
    font-family: $font;
    color:#726a11;
    font-size:1rem;
  }
  }
}
dd:nth-child(6) li:last-child{
  font-family: $died-font;
   color:$died-color;
  div:hover{
    &:after{
      content:" Died. Heard she was nice."
    }
  }
}
dd:nth-child(3n+2) li:last-child{
  font-family:$divorced-font;
  color:$lived-color;
  div:hover{
    &:after{
      content:" Divorced. Annulled. ... lucky."
    }
  }
}
dd:nth-child(3n+1) li:last-child{
  font-family:$beheaded-font;
  color:$died-color;
  div:hover{
    &:after{
      content:" beheaded. Whack!"
    }
  }
}

dd:last-child li:last-child{
  font-family:$survived-font;
  color:$lived-color;
}
dd:not(:last-child) li{
   font-size: 1.2em;
}
dd:last-child li:last-child{
 font-size: 1.5em;
  div:hover{
    &:after{
      content:" Survived ... meh.";
      
    }
  }
}
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.