seantimm/content.html

## content.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head><title>Static Positioning</title>
  <link href="style.css" rel="stylesheet" type="text/css">
</head>
<body class="element">

<ul>
  <li data-selector="element" class="selected">h2</li>
  <li data-selector="id">div#main</li>
  <li data-selector="class">.header</li>
  <li data-selector="descend">div > div</li>
  <li data-selector="complex">h2 + div > div[title~="one"]</li>
</ul>

<div title="main one">&lt;div title=&quot;main one&quot; /&gt;</div>
<h2 class="header">&lt;h2 class=&quot;header&quot; /&gt;</h2>
<div>&lt;div&gt;
  <div id="main" title="main one">&lt;div id=&quot;main&quot; title=&quot;main one&quot; /&gt;</div>
  <div class="header part" title="a second">&lt;div class=&quot;header part&quot; title=&quot;a second&quot; /&gt;</div>
  <div title="one more">&lt;div title=&quot;one more&quot; /&gt;</div>&lt;/div&gt;
</div>

<!-- Code below is to toggle source and load scripts -->
<button id="source">Toggle Source</button>
<script type="text/javascript"
        src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="script.js" type="text/javascript"></script>
<script src="https://gist.github.com/2156149.js" type="text/javascript"></script>
</body>
</html>

## script.js
$(function() {
  $("li").on("click", function(event) {
    var target = $(event.delegateTarget);
    var body = $(document.body);

    body.removeClass();
    body.addClass(target.data("selector"));

    $("ul > li").removeClass("selected");
    target.addClass("selected")
  });

  // Code to support toggling scripts
  $("#source").on("click", function(event) {
    $(".gist").toggle();
  });
});

## style.css
body.element  h2,
body.id       div#main,
body.class    .header,
body.descend  div > div,
body.complex  h2 + div > div[title~="one"] {
  background-color: #deb887;
}

body > ul + * {
  margin-top: 2em;
}

body > ul {
  padding: 1em 0 0 0;
  margin: 0;
  list-style-type: none;
  width: 100%;
  box-sizing: border-box;
  background-color: #deb887;
}

body > ul > li {
  padding: 0;
  margin: 0;
  background-color: #deb887;
}

body > ul > li.selected {
  background-color: #ff7f50;
  display: block;
  position: fixed;
  width: 100%;
  top: 0;
}

h2 {
  font-size: 1em;
  margin: 0;
  padding: 0;
}

div > div {
  margin-left: 1em;
}

html, body {
  padding: 0;
  margin: 0;
}

/* Styles to support toggling the source view */
.gist {
  font-size: 0.5em;
  display: none;
}

div.gist .gist-file {
  position: relative;
  margin: 3em 0;
}

.gist-meta {
  position: absolute;
  top: -2.5em;
  left: -30000px;
}

.gist-meta a {
  display: none;
}

.gist-meta a:nth-child(2) {
  position: relative;
  padding-left: 30000px;
  display: inline;
}

#source {
  float: right;
  clear: both;
}

body {
  font-size: 4em;
}
	<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
	"http://www.w3.org/TR/html4/loose.dtd">
	<html>
	<head><title>Static Positioning</title>
	<link href="style.css" rel="stylesheet" type="text/css">
	</head>
	<body class="element">

	<ul>
	<li data-selector="element" class="selected">h2</li>
	<li data-selector="id">div#main</li>
	<li data-selector="class">.header</li>
	<li data-selector="descend">div > div</li>
	<li data-selector="complex">h2 + div > div[title~="one"]</li>
	</ul>

	<div title="main one"><div title="main one" /></div>
	<h2 class="header"><h2 class="header" /></h2>
	<div><div>
	<div id="main" title="main one"><div id="main" title="main one" /></div>
	<div class="header part" title="a second"><div class="header part" title="a second" /></div>
	<div title="one more"><div title="one more" /></div></div>
	</div>

	<!-- Code below is to toggle source and load scripts -->
	<button id="source">Toggle Source</button>
	<script type="text/javascript"
	src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
	<script src="script.js" type="text/javascript"></script>
	<script src="https://gist.github.com/2156149.js" type="text/javascript"></script>
	</body>
	</html>
	$(function() {
	$("li").on("click", function(event) {
	var target = $(event.delegateTarget);
	var body = $(document.body);

	body.removeClass();
	body.addClass(target.data("selector"));

	$("ul > li").removeClass("selected");
	target.addClass("selected")
	});

	// Code to support toggling scripts
	$("#source").on("click", function(event) {
	$(".gist").toggle();
	});
	});
	body.element h2,
	body.id div#main,
	body.class .header,
	body.descend div > div,
	body.complex h2 + div > div[title~="one"] {
	background-color: #deb887;
	}

	body > ul + * {
	margin-top: 2em;
	}

	body > ul {
	padding: 1em 0 0 0;
	margin: 0;
	list-style-type: none;
	width: 100%;
	box-sizing: border-box;
	background-color: #deb887;
	}

	body > ul > li {
	padding: 0;
	margin: 0;
	background-color: #deb887;
	}

	body > ul > li.selected {
	background-color: #ff7f50;
	display: block;
	position: fixed;
	width: 100%;
	top: 0;
	}

	h2 {
	font-size: 1em;
	margin: 0;
	padding: 0;
	}

	div > div {
	margin-left: 1em;
	}

	html, body {
	padding: 0;
	margin: 0;
	}

	/* Styles to support toggling the source view */
	.gist {
	font-size: 0.5em;
	display: none;
	}

	div.gist .gist-file {
	position: relative;
	margin: 3em 0;
	}

	.gist-meta {
	position: absolute;
	top: -2.5em;
	left: -30000px;
	}

	.gist-meta a {
	display: none;
	}

	.gist-meta a:nth-child(2) {
	position: relative;
	padding-left: 30000px;
	display: inline;
	}

	#source {
	float: right;
	clear: both;
	}

	body {
	font-size: 4em;
	}