Teino1978-Corp · November 23, 2015 03:01
diff --git a/content.html b/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>
diff --git a/script.js b/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();
  });
 });
diff --git a/style.css b/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;
	}