<div id="page-wrap">
  <div class="left">
    <div class="instructions">
      <p id="noscript">Sorry:<br>this tester doesn't work when JavaScript is not enabled...</p>
      <code>
        <select id="el">
          <option value="li">li</option>
          <option value="div">div</option>
        </select>
        <select id="kind">
          <option value=":nth-child" selected>:nth-child</option>
          <option value=":nth-of-type">:nth-of-type</option>
          <option value=":nth-last-child">:nth-last-child</option>
          <option value=":nth-last-of-type">:nth-last-of-type</option>
        </select>
        (
        <input id="equation" type="text" value="3n+2">
        )
      </code>
    </div>
  </div>
  <div class="right">
    <ul id="list">
      <li>
        <div></div>
        <div></div>
        <div></div>
      </li>
      <li>
        <div></div> <ins></ins>
        <div></div>
      </li>
      <li>
        <div></div>
        <div></div>
        <div></div>
      </li>
      <li> <ins></ins>
        <div></div>
        <div></div>
      </li>
      <li>
        <div></div>
        <div></div>
        <div></div>
      </li>
      <li>
        <div></div>
        <div></div> <ins></ins>
        <ul>
          <li>
            <div></div>
            <div></div>
            <div></div>
          </li>
          <li>
            <div></div>
            <div></div>
            <div></div>
          </li>
          <li>
            <div></div>
            <div></div>
            <div></div>
          </li>
        </ul>
      </li>
      <li>
        <div></div>
        <div></div>
        <div></div>
      </li>
      <li> <ins></ins>
        <div></div>
        <div></div>
      </li>
      <li> <ins></ins> <ins></ins>
        <div></div>
      </li>
      <li>
        <div></div>
        <div></div> <ins></ins>
      </li>
      <li>
        <div></div>
        <div></div>
        <div></div>
      </li>
      <li>
        <div></div>
        <div></div>
        <div></div>
      </li>
      <li>
        <div></div> <ins></ins> <ins></ins>
      </li>
      <li>
        <div></div>
        <div></div>
        <div></div>
      </li>
      <li>
        <div></div>
        <div></div>
        <div></div>
        <ul>
          <li>
            <div></div>
            <div></div>
            <div></div>
            <ul>
              <li>
                <div></div>
                <div></div>
                <div></div>
              </li>
              <li>
                <div></div>
                <div></div>
                <div></div>
              </li>
              <li>
                <div></div>
                <div></div>
                <div></div>
              </li>
            </ul>
          </li>
          <li>
            <div></div>
            <div></div>
            <div></div>
          </li>
          <li>
            <div></div>
            <div></div>
            <div></div>
          </li>
        </ul>
      </li>
      <li>
        <div></div>
        <div></div>
        <div></div>
      </li>
      <li>
        <div></div>
        <div></div>
        <div></div>
      </li>
      <li>
        <div></div>
        <div></div>
        <div></div>
      </li>
    </ul>
  </div>
</div>

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
body {
  font: 15px/1.4 Sans-Serif;
  background: #101010 url("https://cdpn.io/airen/debug/oNjMyjd/GnAnbOoNDWzA");
}
.selected {
  background: #e18728;
  color: #000;
  box-shadow: 0 0 5px #000;
  display: inline-block;
  padding: 3px 5px;
  border-radius: 8px;
}
#page-wrap {
  width: 960px;
  margin: 50px auto;
  overflow: hidden;
}
.left,
.right {
  width: 50%;
  float: left;
}
.left {
  padding-right: 30px;
}
h1 {
  text-align: center;
  color: #e18728;
  font-size: 60px;
  margin: 30px 0 10px;
}
h2 {
  font-weight: 400;
  margin: 5px 0;
  color: #fff;
}
h3 {
  margin: 50px 0 10px;
}
p {
  margin: 0 0 10px;
}
.recipies-list li {
  margin: 10px 0;
}
.recipies-list a {
  color: #fff;
  text-decoration: none;
  padding-left: 5px;
  border-left: 4px solid transparent;
}
.recipies-list li.active a {
  color: #e18728;
}
.recipies-list a:hover,
.recipies-list a:focus {
  border-left: 4px solid #e18728;
}
input[type="text"],
select {
  font: inherit;
  padding: 4px;
  border: 0;
}
#equation {
  width: 60px;
}
.pink {
  color: #ff0080;
}
.instructions {
  color: #fff;
}
ul {
  list-style: none;
}
#list {
  padding-left: 10px;
}
#list li {
  margin: 0 0 6px;
  color: #fff;
  padding: 2px 10px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 8px;
}
#list ul {
  margin-top: 2px;
}
#list li div,
#list li span {
  display: inline-block;
  padding: 3px 5px 5px;
  border-radius: 8px;
  color: #fff;
}
#list {
  font-family: monospace;
}
#list:before,
#list ul:before {
  content: "<ul>";
  color: #fff;
}
#list:after,
#list ul:after {
  content: "</ul>";
  color: #fff;
}
#list:before,
#list:after {
  padding-left: 10px;
  font-weight: 700;
  line-height: 2.5em;
}
#list ul {
  margin: 2px 0 5px 30px;
  padding: 5px 10px 5px 5px;
  background: #707070;
  border-radius: 8px;
}
#list li {
  font-size: 0.9rem;
}
#list ul li {
  margin: 0 0 6px 35px;
  background: #424344;
}
#list li:before {
  content: "<li>";
}
#list li:after {
  content: "</li>";
}
#list div,
#list ins {
  border-radius: 8px;
  color: #fff;
  display: inline-block;
  padding: 3px 3px 5px !important;
}
#list ins {
  text-decoration: none;
}
#list div:after {
  content: "<div>";
  color: #fff;
}
#list ins:after {
  content: "<ins>";
  color: #fff;
}
#el option {
  width: 2.2em;
}
#kind option {
  width: 11em;
}
#noscript {
  margin: 20px 40px 40px;
  padding: 5px;
  background: #fff;
  border-radius: 10px;
  box-shadow: 0 0 10px 10px #e18728;
  color: #a30000;
}
body {
  overflow-x: hidden;
}
#demo-top-bar {
  text-align: left;
  background: #222;
  position: relative;
  zoom: 1;
  width: 100% !important;
  z-index: 6000;
  padding: 20px 0 20px;
}
#demo-bar-inside {
  width: 960px;
  margin: 0 auto;
  position: relative;
  overflow: hidden;
}
#demo-bar-buttons {
  padding-top: 10px;
  float: right;
}
#demo-bar-buttons a {
  font-size: 12px;
  margin-left: 20px;
  color: white;
  margin: 2px 0;
  text-decoration: none;
  font: 14px "Lucida Grande", Sans-Serif !important;
}
#demo-bar-buttons a:hover,
#demo-bar-buttons a:focus {
  text-decoration: underline;
}
#demo-bar-badge {
  display: inline-block;
  width: 302px;
  padding: 0 !important;
  margin: 0 !important;
  background-color: transparent !important;
}
#demo-bar-badge a {
  display: block;
  width: 100%;
  height: 38px;
  border-radius: 0;
  bottom: auto;
  margin: 0;
  background: url(/images/examples-logo.png) no-repeat;
  background-size: 100%;
  overflow: hidden;
  text-indent: -9999px;
}
#demo-bar-badge:before,
#demo-bar-badge:after {
  display: none !important;
}

document.getElementById("noscript").style.display = "none";
injectElementWithStyles = function (rule) {
  var style,
    div = document.createElement("div");
  style = ["&shy;", "<style>", rule, "</style>"].join("");
  div.id = "temp-styles";
  div.innerHTML += style;
  $("html").append(div);
};
var $el;
$("#equation, #kind, #el").bind("change keyup blur focus", function () {
  $("#temp-styles").remove();
  var el = $("#el option:selected").val();
  var kind = $("#kind option:selected").val();
  var equation = $("#equation").val();
  if (kind == ":nth-child") {
    injectElementWithStyles(
      "#list " +
        el +
        ":nth-child(" +
        equation +
        ") { background: #E18728; color: black; box-shadow: 0 0 5px black; }"
    );
  }
  if (kind == ":nth-of-type") {
    injectElementWithStyles(
      "#list " +
        el +
        ":nth-of-type(" +
        equation +
        ") { background: #E18728; color: black; box-shadow: 0 0 5px black; }"
    );
  }
  if (kind == ":nth-last-child") {
    injectElementWithStyles(
      "#list " +
        el +
        ":nth-last-child(" +
        equation +
        ") { background: #E18728; color: black; box-shadow: 0 0 5px black; }"
    );
  }
  if (kind == ":nth-last-of-type") {
    injectElementWithStyles(
      "#list " +
        el +
        ":nth-last-of-type(" +
        equation +
        ") { background: #E18728; color: black; box-shadow: 0 0 5px black; }"
    );
  }
});
$("#equation").focus();
$("#rec-1").on("click", function () {
  $("#el").val("li");
  $("#kind").val(":nth-child");
  $("#equation").val("3");
  $("#el").trigger("change");
  return false;
});
$("#rec-2").on("click", function () {
  $("#el").val("li");
  $("#kind").val(":nth-child");
  $("#equation").val("-n+4");
  $("#el").trigger("change");
  return false;
});
$("#rec-3").on("click", function () {
  $("#el").val("li");
  $("#kind").val(":nth-last-child");
  $("#equation").val("2");
  $("#el").trigger("change");
  return false;
});
$("#rec-4").on("click", function () {
  $("#el").val("div");
  $("#kind").val(":nth-of-type");
  $("#equation").val("1");
  $("#el").trigger("change");
  return false;
});
$("#rec-5").on("click", function () {
  $("#el").val("div");
  $("#kind").val(":nth-last-of-type");
  $("#equation").val("1");
  $("#el").trigger("change");
  return false;
});
$("#rec-6").on("click", function () {
  $("#el").val("li");
  $("#kind").val(":nth-of-type");
  $("#equation").val("odd");
  $("#el").trigger("change");
  return false;
});
$("#rec-7").on("click", function () {
  $("#el").val("li");
  $("#kind").val(":nth-of-type");
  $("#equation").val("5n+1");
  $("#el").trigger("change");
  return false;
});
$("#rec-8").on("click", function () {
  $("#el").val("li");
  $("#kind").val(":nth-child");
  $("#equation").val("3n+2");
  $("#el").trigger("change");
  return false;
});
$("#rec-9").on("click", function () {
  $("#el").val("li");
  $("#kind").val(":nth-child");
  $("#equation").val("n+7");
  $("#el").trigger("change");
  return false;
});
var recipieOptions = $(".recipies-list > li");
recipieOptions.on("click", function () {
  recipieOptions.removeClass("active");
  $(this).addClass("active");
});