%div{:class => "bg-1"}
  %p
    Background one <a href="https://codepen.io/ross-angus/pen/eaGmJz" target="_top">Visited link</a> <a href="https://codepen.io/ross-angus/pen/eaGmJz" target="_top" data-js="fresh">Fresh link</a>
  %div{:class => "bg-2"}
    %p
      Background two <a href="https://codepen.io/ross-angus/pen/eaGmJz" target="_top">Visited link</a> <a href="https://codepen.io/ross-angus/pen/eaGmJz" target="_top" data-js="fresh">Fresh link</a>
    %div{:class => "bg-3"}
      %p
        Background three <a href="https://codepen.io/ross-angus/pen/eaGmJz" target="_top">Visited link</a> <a href="https://codepen.io/ross-angus/pen/eaGmJz" target="_top" data-js="fresh">Fresh link</a>
      %div{:class => "bg-4"}
        %p
          Background four <a href="https://codepen.io/ross-angus/pen/eaGmJz" target="_top">Visited link</a> <a href="https://codepen.io/ross-angus/pen/eaGmJz" target="_top" data-js="fresh">Fresh link</a>
        %div{:class => "bg-5"}
          %p
            Background five <a href="https://codepen.io/ross-angus/pen/eaGmJz" target="_top">Visited link</a> <a href="https://codepen.io/ross-angus/pen/eaGmJz" target="_top" data-js="fresh">Fresh link</a>
          %div{:class => "bg-6"}
            %p
              Background six <a href="https://codepen.io/ross-angus/pen/eaGmJz" target="_top">Visited link</a> <a href="https://codepen.io/ross-angus/pen/eaGmJz" target="_top" data-js="fresh">Fresh link</a>
            %div{:class => "bg-7"}
              %p
                Background seven <a href="https://codepen.io/ross-angus/pen/eaGmJz" target="_top">Visited link</a> <a href="https://codepen.io/ross-angus/pen/eaGmJz" target="_top" data-js="fresh">Fresh link</a>
              %div{:class => "bg-8"}
                %p
                  Background eight <a href="https://codepen.io/ross-angus/pen/eaGmJz" target="_top">Visited link</a> <a href="https://codepen.io/ross-angus/pen/eaGmJz" target="_top" data-js="fresh">Fresh link</a>
                %div{:class => "bg-9"}
                  %p
                    Background nine <a href="https://codepen.io/ross-angus/pen/eaGmJz" target="_top">Visited link</a> <a href="https://codepen.io/ross-angus/pen/eaGmJz" target="_top" data-js="fresh">Fresh link</a>
                  %div{:class => "bg-10"}
                    %p
                      Background ten <a href="https://codepen.io/ross-angus/pen/eaGmJz" target="_top">Visited link</a> <a href="https://codepen.io/ross-angus/pen/eaGmJz" target="_top" data-js="fresh">Fresh link</a>
                    %div{:class => "bg-11"}
                      %p
                        Background eleven <a href="https://codepen.io/ross-angus/pen/eaGmJz" target="_top">Visited link</a> <a href="https://codepen.io/ross-angus/pen/eaGmJz" target="_top" data-js="fresh">Fresh link</a>
                      %div{:class => "bg-12"}
                        %p
                          Background twelve <a href="https://codepen.io/ross-angus/pen/eaGmJz" target="_top">Visited link</a> <a href="https://codepen.io/ross-angus/pen/eaGmJz" target="_top" data-js="fresh">Fresh link</a>
                        %div{:class => "bg-13"}
                          %p
                            Background thirteen <a href="https://codepen.io/ross-angus/pen/eaGmJz" target="_top">Visited link</a> <a href="https://codepen.io/ross-angus/pen/eaGmJz" target="_top" data-js="fresh">Fresh link</a>

%div{:class => "bg-13"}
  %p
    Background thirteen <a href="https://codepen.io/ross-angus/pen/eaGmJz" target="_top">Visited link</a> <a href="https://codepen.io/ross-angus/pen/eaGmJz" target="_top" data-js="fresh">Fresh link</a>
  %div{:class => "bg-12"}
    %p
      Background twelve <a href="https://codepen.io/ross-angus/pen/eaGmJz" target="_top">Visited link</a> <a href="https://codepen.io/ross-angus/pen/eaGmJz" target="_top" data-js="fresh">Fresh link</a>
    %div{:class => "bg-11"}
      %p
        Background eleven <a href="https://codepen.io/ross-angus/pen/eaGmJz" target="_top">Visited link</a> <a href="https://codepen.io/ross-angus/pen/eaGmJz" target="_top" data-js="fresh">Fresh link</a>
      %div{:class => "bg-10"}
        %p
          Background ten <a href="https://codepen.io/ross-angus/pen/eaGmJz" target="_top">Visited link</a> <a href="https://codepen.io/ross-angus/pen/eaGmJz" target="_top" data-js="fresh">Fresh link</a>
        %div{:class => "bg-9"}
          %p
            Background nine <a href="https://codepen.io/ross-angus/pen/eaGmJz" target="_top">Visited link</a> <a href="https://codepen.io/ross-angus/pen/eaGmJz" target="_top" data-js="fresh">Fresh link</a>
          %div{:class => "bg-8"}
            %p
              Background eight <a href="https://codepen.io/ross-angus/pen/eaGmJz" target="_top">Visited link</a> <a href="https://codepen.io/ross-angus/pen/eaGmJz" target="_top" data-js="fresh">Fresh link</a>
            %div{:class => "bg-7"}
              %p
                Background seven <a href="https://codepen.io/ross-angus/pen/eaGmJz" target="_top">Visited link</a> <a href="https://codepen.io/ross-angus/pen/eaGmJz" target="_top" data-js="fresh">Fresh link</a>
              %div{:class => "bg-6"}
                %p
                  Background six <a href="https://codepen.io/ross-angus/pen/eaGmJz" target="_top">Visited link</a> <a href="https://codepen.io/ross-angus/pen/eaGmJz" target="_top" data-js="fresh">Fresh link</a>
                %div{:class => "bg-5"}
                  %p
                    Background five <a href="https://codepen.io/ross-angus/pen/eaGmJz" target="_top">Visited link</a> <a href="https://codepen.io/ross-angus/pen/eaGmJz" target="_top" data-js="fresh">Fresh link</a>
                  %div{:class => "bg-4"}
                    %p
                      Background four <a href="https://codepen.io/ross-angus/pen/eaGmJz" target="_top">Visited link</a> <a href="https://codepen.io/ross-angus/pen/eaGmJz" target="_top" data-js="fresh">Fresh link</a>
                    %div{:class => "bg-3"}
                      %p
                        Background three <a href="https://codepen.io/ross-angus/pen/eaGmJz" target="_top">Visited link</a> <a href="https://codepen.io/ross-angus/pen/eaGmJz" target="_top" data-js="fresh">Fresh link</a>
                      %div{:class => "bg-2"}
                        %p
                          Background two <a href="https://codepen.io/ross-angus/pen/eaGmJz" target="_top">Visited link</a> <a href="https://codepen.io/ross-angus/pen/eaGmJz" target="_top" data-js="fresh">Fresh link</a>
                        %div{:class => "bg-1"}
                          %p
                            Background one <a href="https://codepen.io/ross-angus/pen/eaGmJz" target="_top">Visited link</a> <a href="https://codepen.io/ross-angus/pen/eaGmJz" target="_top" data-js="fresh">Fresh link</a>
%p
  I've written <a href="https://codepen.io/ross-angus/post/inheritance" target="_blank">a Codepen post which is a full description of this garish hell</a>.
View Compiled
// Other properties declared in rules following this
// These colours alternate between light and dark
.bg-1  {background: maroon;}
.bg-2  {background: antiquewhite;}
.bg-3  {background: red;}
.bg-4  {background: aquamarine;}
.bg-5  {background: purple;}
.bg-6  {background: azure;}
.bg-7  {background: fuchsia;}
.bg-8  {background: beige;}
.bg-9  {background: green;}
.bg-10 {background: bisque;}
.bg-11 {background: darkred;}
.bg-12 {background: blanchedalmond;}
.bg-13 {background: olive;}
// Light coloured boxes
.bg-2, .bg-4, .bg-6, .bg-8, .bg-10, .bg-12 {
  border-color: #000;
  color: #000;
  outline-color: #000;
  /* This is not required, as the dark link colour is the default.
  & > :not([class*="bg-"]) a:link {
    border-color: #00e;
    color: #00e; 
    outline-color: #00e;
  }
  & > :not([class*="bg-"]) a:visited {
    border-color: #551a8b;
    color: #551a8b; 
    outline-color: #551a8b;
  }*/
}
// Dark coloured boxes
.bg-1, .bg-3, .bg-5, .bg-7, .bg-9, .bg-11, .bg-13 {
  border-color: #fff;
  color: #fff;
  outline-color: #fff;
  & > :not([class*="bg-"]) a:link {
    border-color: #9ff;
    color: #9ff; 
    outline-color: #9ff;
  }
  & > :not([class*="bg-"]) a:visited {
    border-color: #fcf;
    color: #fcf; 
    outline-color: #fcf;
  }
}

// #00e is the bright blue browser default
a:link {
  border-bottom: solid 1px #00e;
  color: #00e;
  outline-color: #00e;
  text-decoration: none;
}
/*
:visited white-list of declarations:
color, background-color, border-color, border-bottom-color, border-left-color, border-right-color, border-top-color, column-rule-color, and outline-color.
*/
// #551a8b is the maroon browser default
a:visited {
  border-bottom-color: #551a8b;
  color: #551a8b;
  outline-color: #551a8b;
}

/*[class*="bg-"] a:link {
  border-bottom-color: inherit;
  color: inherit;
}*/
a:hover {
  border-bottom-color: inherit;
  border-bottom-style: dashed;
}
a:active {
  border-bottom-style: solid;
}
a:focus {
  border-bottom: none;
  outline-style: dotted;
  outline-widdth: 1px;
  outline-color: inherit;
}

// Just cosmetics
[class*="bg-"] {padding: 1em;}
p {margin: 0 0 1em;}
// Cheap-and-cheerful grid
body {
  display: flex;
  flex-wrap: wrap;
}
  body > div {flex: 1;}

body {
  font-family: "Segoe UI", Selawik, Tahoma, Verdana, Arial, sans-serif;
}
View Compiled
// Makes sure that links with a data-js="fresh" attribute don't appear in the user's history
var elements = document.querySelectorAll('[data-js="fresh"]');
Array.prototype.forEach.call(elements, function(el, i){
  var currentHREF = el.getAttribute('href');
  if (currentHREF != '' || typeof currentHREF != 'undefined') {
    el.setAttribute('href', currentHREF + '?r=' + Math.random());
  }
});

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.