Loading

:kids—an nth-child tester

A simple tool to test and store nth-child pseudo classes. If you keep forgetting about those awesome selectors you wrote some time ago, this is the tool for you!

<!DOCTYPE html>
<html >
<head>
  <meta charset="UTF-8">
  <title>:kids—an nth-child tester</title>
  <meta name="viewport" content="width=device-width" />
  
  
      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>
  <section id="intro">
  <div class="wrap island">
    <h1>:kids<span class="subtitle">—an nth-child tester</span><a href="#tool" class="quick-jump">▼</a></h1>
    <p>The nth-child selector and its variations are some of the most powerful yet sometimes very confusing features of CSS. They're part of Selectors Level 3 and browser support is quite decent, except for, you guessed it, IE before version 9.</p>
    <p><b>:kids</b> is a simple tool to show the effects of the various nth-child selectors in a nice way. Besides that, you can store them to get back to them later on.</p>
  </div>
</section>
<section id="tool">
  <div class="wrap wide-wrap island">
    <div class="grid">
      <div class="col-third">
        <h2>Examples <a class="toggle toggle-examples" id="jsToggleExamples">Show</a></h2>
        <ul class="examples list hidden">
          <li class="example" data-formula="nth-child(5)">Fifth cell</li>
          <li class="example" data-formula="nth-child(even)">Every evenly numbered cell</li>
          <li class="example" data-formula="nth-child(3n)">Every third cell</li>
          <li class="example" data-formula="nth-child(n+6)">All cells, starting from the sixth</li>
          <li class="example" data-formula="nth-child(3n+5)">Every third cell, starting from the fifth</li>
          <li class="example" data-formula="nth-child(-n+3)">First three cells</li>
          <li class="example" data-formula="last-child">Last cell</li>
          <li class="example" data-formula="nth-last-child(3)">Third to last cell</li>
          <li class="example" data-formula="nth-last-child(-n+3)">Last three cells</li>
        </ul>
      </div>
      <div class="col-third tools">
        <input type="text" class="nth-child-input" value="nth-child(odd)" placeholder="nth-child(odd)" autocapitalize="off" autocorrect="off" autocomplete="off" />
        <ul class="boxes">
          <li class="box"></li>
          <li class="box"></li>
          <li class="box"></li>
          <li class="box"></li>
          <li class="box"></li>
          <li class="box"></li>
          <li class="box"></li>
          <li class="box"></li>
          <li class="box"></li>
        </ul>
      </div>
      <div class="col-third">
        <h2>Saves<a class="toggle toggle-saves" id="jsToggleSaves">Hide</a></h2>
        <ul class="saves list"></ul>
        <a id="jsSaveFormula" class="save hidden">Save current selector</a>
      </div>
    </div>
  </div>
</section>
<section id="story">
  <div class="wrap island">
    <dl>
      <dt>Why yet another nth-child tester?</dt>
      <dd>In my opinion, most of the others are either ugly or miss the point in various ways. Besides, I just wanted to <b>build</b> a thing.</dd>
      <dt>Why use this one?</dt>
      <dd>First off, it's really easy to use. Enter whatever you want into the box and see what happens. Secondly, I think it's not the uggliest tool on the web. But the main reason is that you can <b>store your selectors</b> so you'll never forget them. Oh, and did I mention there's an easter egg? Good luck finding it.</dd>
      <dt>Help! I feel so lost here.</dt>
      <dd>This tool serves only as a visual aid, it does by no means try to explain the usage of those pseudo classes. If you need a great tutorial, Chris Coyier <a href="https://css-tricks.com/how-nth-child-works/" title="Read 'How nth-child works' on CSS-Tricks">has got you covered</a>.</dt>
      <dt>What's with that name?</dt>
      <dd>I'm terrible at finding names. I really am. I guess you could already figure. But nth-child and kids seemed like a good combination. So yeah, take it or leave it.</dd>
    </dl>
  </div>
</section>
<footer>
  <div class="wrap island">
    <p class="small copyright">:kids is a tool by <a href="http://sachaschmid.ch">Sacha Schmid</a>, created on <a href="https://codepen.io">CodePen</a>.</p>
  </div>
</footer>
  <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>

    <script  src="js/index.js"></script>

</body>
</html>
/* Downloaded from https://ahoj.co.uk/ */
/* ------------------------------------------------------------------------------------ *\

    WEB FONTS [$webfonts]

    Use Source Sans Pro (400, 700) and Droid Serif (400) from Google Web Fonts.

\* --------------------------------------------------------------------https://codepen.io/sacha/pen/cAJEo---------------- */
@font-face {
  font-family: 'Source Sans Pro';
  font-style: normal;
  font-weight: 700;
  src: local("Source Sans Pro Bold"), local("SourceSansPro-Bold"), url(http://themes.googleusercontent.com/static/fonts/sourcesanspro/v4/toadOcfmlt9b38dHJxOBGFkQc6VGVFSmCnC_l7QZG60.woff) format("woff");
}
@font-face {
  font-family: 'Source Sans Pro';
  font-style: normal;
  font-weight: 400;
  src: local("Source Sans Pro"), local("SourceSansPro-Regular"), url(http://themes.googleusercontent.com/static/fonts/sourcesanspro/v4/ODelI1aHBYDBqgeIAH2zlBM0YzuT7MdOe03otPbuUS0.woff) format("woff");
}
@font-face {
  font-family: 'Droid Serif';
  font-style: normal;
  font-weight: 400;
  src: local("Droid Serif"), local("DroidSerif"), url(http://themes.googleusercontent.com/static/fonts/droidserif/v3/0AKsP294HTD-nvJgucYTaIbN6UDyHWBl620a-IRfuBk.woff) format("woff");
}
/* ------------------------------------------------------------------------------------ *\

    GENERAL [$general | $generic]

    Element-level styling and resets.

\* ------------------------------------------------------------------------------------ */
* {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

html {
  font: 87.5%/1.5 "Source Sans Pro", sans-serif;
}
@media (min-width: 30em) {
  html {
    font-size: 100%;
    line-height: 1.6;
  }
}
@media (min-width: 50em) {
  html {
    font-size: 112.5%;
    line-height: 1.7;
  }
}
@media (min-width: 70em) {
  html {
    font-size: 125%;
    line-height: 1.8;
  }
}

body {
  margin: 0;
  color: #333;
}

/**
 * HELPERS [$helpers]
 * ------------------------------------------------------------------------------------
 *
 * Basic helper classes for the layout.
 */
.wrap {
  max-width: 50em;
  margin-right: auto;
  margin-left: auto;
}

.wide-wrap {
  max-width: 64em;
}

.island {
  padding: 3em;
}

.small {
  font-size: 0.75em;
}

/**
 * TYPOGRAPHY [$typography | $type]
 * ------------------------------------------------------------------------------------
 *
 */
h1 {
  font-size: 2em;
}

.subtitle {
  color: #999999;
}

h2 {
  font-size: 1.7em;
  line-height: 1.765;
}

a {
  padding-bottom: 0.2em;
  color: #a32c28;
  font-weight: bold;
  border-bottom: 2px solid;
  text-decoration: none;
  -moz-transition: border-bottom-color 0.25s ease-in-out, color 0.25s ease-in-out;
  -o-transition: border-bottom-color 0.25s ease-in-out, color 0.25s ease-in-out;
  -webkit-transition: border-bottom-color 0.25s ease-in-out, color 0.25s ease-in-out;
  transition: border-bottom-color 0.25s ease-in-out, color 0.25s ease-in-out;
  -webkit-tap-highlight-color: rgba(210, 75, 70, 0.3);
}

a:hover,
a:focus {
  color: #d24a46;
}

a:active {
  position: relative;
  top: 1px;
}

h1,
h2,
p,
ul,
dl {
  margin-top: 0;
  margin-bottom: 1.5rem;
}

/* ------------------------------------------------------------------------------------ *\

    LAYOUT [$layout]

\* ------------------------------------------------------------------------------------ */
section {
  border-bottom: 1px solid #ccc;
}

section:last-child {
  border-bottom: 0;
}

section:nth-child(odd),
footer:nth-child(odd) {
  background-color: #eee;
}

section :last-child,
footer :last-child {
  margin-bottom: 0;
}

/**
 * GRID [$grid]
 * ------------------------------------------------------------------------------------
 * 
 * A lovely mini grid. Three fluid columns with fixed-width gutters of 3em.
 */
@media (min-width: 50em) {
  .grid {
    *zoom: 1;
    margin-left: -3em;
  }
  .grid::before, .grid::after {
    content: " ";
    display: table;
  }
  .grid::after {
    clear: both;
  }
}

.col-third {
  margin-bottom: 3em;
}
@media (min-width: 50em) {
  .col-third {
    float: left;
    width: 33.333%;
    padding-left: 3em;
    margin-bottom: 0;
  }
}

/* ------------------------------------------------------------------------------------ *\

    TOOLS [$tools]

    Styling for the input and the box grid.

\* ------------------------------------------------------------------------------------ */
.quick-jump {
  float: right;
  padding: 0 0.5em;
  font-size: 1rem;
  line-height: 3.6em;
  border-bottom: 0;
}

.nth-child-input {
  display: block;
  width: 100%;
  padding: 0.5em;
  margin: 0 auto 3rem;
  font-size: 1.5em;
  font-family: 'Droid Serif', serif;
  border: 1px solid #ccc;
  -moz-appearance: none;
  -webkit-appearance: none;
  -moz-border-radius: 0;
  -webkit-border-radius: 0;
  border-radius: 0;
  outline: none;
}
.nth-child-input:focus {
  border: 1px solid #4cadeb;
  border-top-color: #157bbc;
  -moz-box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15);
  -webkit-box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15);
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15);
}

.boxes {
  list-style: none;
  margin-top: 0;
  margin-bottom: 0;
  padding-left: 0;
  width: 100%;
  margin: 0 auto;
  *zoom: 1;
}
.boxes::before, .boxes::after {
  content: " ";
  display: table;
}
.boxes::after {
  clear: both;
}

.box {
  counter-increment: box;
  float: left;
  height: 5.3em;
  width: 31.333%;
  margin-right: 3%;
  margin-bottom: 3%;
  text-align: center;
  background-color: #ddd;
}
.box:nth-child(3n) {
  margin-right: 0;
}
.box:nth-last-child(-n+3) {
  margin-bottom: 0;
}
.box::after {
  content: counter(box);
  font-size: 2em;
  font-weight: bold;
  line-height: 2.65em;
  color: rgba(41, 41, 41, 0.2);
}

/* ------------------------------------------------------------------------------------ *\

    LISTS [$lists | $saves | $examples]

    Styling for both lists, the saves and the examples.

\* ------------------------------------------------------------------------------------ */
.saves:empty {
  margin-bottom: 0;
}
.saves:empty::after {
  content: "You haven't saved any selectors yet.";
  display: block;
  margin-bottom: 1.5em;
}

.save {
  display: block;
  margin-bottom: 1.5em;
}

.save.hidden {
  display: none;
  margin-bottom: 0;
}

.examples,
.saves {
  max-height: 18.8em;
  overflow-x: hidden;
  overflow-y: scroll;
}

.examples,
.saves {
  padding-left: 0;
  list-style: none;
}

.examples.hidden,
.saves.hidden {
  display: none;
}

.toggle {
  float: right;
  font-size: 1rem;
  cursor: pointer;
  line-height: 3em;
}

.example,
.save {
  padding: 0.5em 1em;
  border: 1px solid #ddd;
  cursor: pointer;
}

.saves .example,
.save {
  cursor: pointer;
}

.example {
  margin-bottom: 0.5em;
  background-color: #eee;
  outline: none;
}

.saves .example:focus {
  background: -webkit-linear-gradient(-45deg, #eee 25%, transparent 25%, transparent 50%, #eee 50%, #eee 75%, transparent 75%, transparent);
  background-size: 50px 50px;
  border-style: dashed;
}

.example::after {
  content: " " attr(data-formula);
  color: #b3b3b3;
}

/* ------------------------------------------------------------------------------------ *\

    FOOTER [$footer]

\* ------------------------------------------------------------------------------------ */
dt {
  font-weight: bold;
}

dd {
  margin-left: 0;
  margin-bottom: 1.5em;
}

.copyright {
  text-align: center;
}
/* Downloaded from https://ahoj.co.uk/ */
/**
* Alright, let's do this. These following lines make :kids work the way it does.
 */

var HIGHLIGHT_COLOR = '#ff7357',
    DEFAULT_COLOR = '#ddd',
    defaultValue = localStorage.last || 'nth-child(odd)',
    boxes = $('.box'),
    saves = $('.saves'),
    examples = $('.examples'),
    input = $('.nth-child-input'),
    saveButton = $('#jsSaveFormula'),
    formulaTimeout,
    toggleList = function toggleList (element, action) {
      if (element === saves) {
        localStorage.saHidden = action;
        $('#jsToggleSaves').text(action === 'Hide' ? 'Show' : 'Hide');
      } else {
        localStorage.exHidden = action;
        $('#jsToggleExamples').text(action === 'Hide' ? 'Show' : 'Hide');
      }

      if (action === 'Hide') {
        element.addClass('hidden');
      } else {
        element.removeClass('hidden');
      }
    };

$('body').on('touchstart', function () {
});

// Load settings from localStorage and use them on the page.

if (localStorage.saves) {
  $('.saves').html(localStorage.saves);
}

if (localStorage.exHidden) {
  toggleList(examples, localStorage.exHidden);
}

if (localStorage.saHidden) {
  toggleList(saves, localStorage.saHidden);
}

// Apply the last entered or the default selector.

input.val(defaultValue);
input.attr('placeholder', defaultValue);
$('.box:' + defaultValue).css('background-color', HIGHLIGHT_COLOR);

input.on('input', function () {
  var val = this.value;
  
  boxes.css('background-color', DEFAULT_COLOR);
  
  // Check for a valid selector. If it is valid, it's applied to the boxes and the user can save it.
  
  if (val.length && /^(last|first)-child|(nth(-last)?-child\((\d|n|N|\+|\-|odd|ODD|even|EVEN)*\))$/.test(val)) {
    saveButton.removeClass('hidden');
    $('.box:' + val).css('background-color', HIGHLIGHT_COLOR);
    $(this).attr('placeholder', val);
    localStorage.last = val;
  } else {
    saveButton.addClass('hidden');
  }
});

// Clear the input on click if it's the value we started with.

input.on('focus', function () {
  clearInterval(danceInterval);
  if ($(this).val() === defaultValue) {
    $(this).val('');
    boxes.css('background-color', DEFAULT_COLOR);
  }
});

// Hover an item from the examples or the saves and it's applied to the boxes.

$('.list').on('hover click', '.example', function () {
  if (!input.is(':focus')) {
    clearTimeout(formulaTimeout);

    var formula = $(this).data('formula');

    formulaTimeout = setTimeout(function () {
      boxes.css('background-color', DEFAULT_COLOR);
      $('.box:' + formula).css('background-color', HIGHLIGHT_COLOR);
      input.val(formula).attr('placeholder', formula);
      localStorage.last = formula;
    }, 50);
  }
});

// Let users show or hide sections from the page.

$('.toggle').on('click', function (event) {
  if (event.target.id === 'jsToggleSaves') {
    toggleList(saves, $(this).text());
  } else {
    toggleList(examples, $(this).text());
  }
});

// Let users save their selectors so they don't even have to remember it. Yay, Internet!

$('#jsSaveFormula').on('click', function () {
  saves.append('<li class="example" data-formula="' + input.val() + '" contenteditable></li>');
  toggleList(saves, 'Show');
  // Scroll saves to the bottom if save is out of view
  saves.find('.example:last-child').focus();
  $(this).addClass('hidden');
});

// Save the name of the saves on blur.

saves.on('blur', '.example', function () {
  localStorage.saves = saves.html();
});

/**
 * Keyboard functionality.
 * 27 = ESC: Blur the input if it has focus.
 * 13 = ENTER: Add save if an `.example` has focus.
 *             Focus the input if it doesn't have focus.
 */

$(window).on({
  keypress: function (event) {
    var code = event.keyCode;
    
    if (code === 13) {
      if ($(':focus').hasClass('example')) {
        event.preventDefault();
        $(':focus').blur();
      } else if (!input.is(':focus')) {
        input.focus();
      }
    }
  },
  keyup: function (event) {
    var code = event.keyCode;
    
    if (code === 27 && input.is(':focus')) {
      if (input.val() === '') {
        input.blur();
      } else {
        input.val('');
        boxes.css('background-color', DEFAULT_COLOR);
        saveButton.addClass('hidden');
      }
    }
  }
});

// Make inline links animate smoothly.

$('a[href^="#"]').on('click', function (event) {
  $('html, body').animate({
    scrollTop: $($(this).attr('href')).offset().top
  }, 250);
});

/**
 * So, this is it. Don't read on. There's nothing interesting or valuable or whatever.
 */

var code = '149825', // DEFINITELY not the easter egg, just keep looking, kthxbai.
    entries = '',
    counter = 0,
    setups = ['nth-child(3n+1)', 'nth-child(3n+2)', 'nth-child(3n)', 'nth-child(odd)', 'nth-child(even)', 'nth-child(n)', 'nth-child(-n+7)', 'nth-child(-n+5)', 'nth-child(-n+3)', 'nth-child(1)', 'nth-child(odd)', 'nth-child(even)', 'nth-child(2n+3)', 'nth-child(4n)', 'nth-child(2n)', 'nth-last-child(-n+5)', 'nth-child(n+4)', 'nth-child(3n)', 'nth-child(5n)', 'nth-child(-n+4)', 'nth-child(n+7)', 'nth-child(odd)', 'nth-child(even)', 'nth-child(odd)', 'nth-child(even)', 'nth-child(3n)', 'nth-child(4n)', 'nth-child(2n+3)', 'nth-child(n)', 'nth-child(odd)', 'nth-child(n)', 'nth-child(odd)', 'nth-child(even)', 'nth-child(n)', 'nth-child(-n+3)', 'nth-child(3n)', 'nth-child(3n+2)', 'nth-child(3n+1)', 'nth-child(odd)', 'nth-child(even)', 'nth-child(2n+4)', 'nth-child(2n+5)', 'nth-child(odd)', 'nth-child(3n)', 'nth-child(3n+1)', 'nth-child(odd)', 'nth-child(even)', localStorage.last || 'nth-child(odd)'],
    dance = function dance () {
      $('.box').css('background-color', DEFAULT_COLOR);
      $('.box:' + setups[counter]).css('background-color', HIGHLIGHT_COLOR);
      counter++;
      if (counter === setups.length) {
        clearInterval(danceInterval);
      }
    },
    danceInterval;

boxes.on('click', function () {
  entries += $(this).text();
  if (entries !== code.substring(0, entries.length)) {
    entries = '';
  } else if (entries === code) {
    counter = 0;
    danceInterval = setInterval(dance, 200);
    entries = '';
  }
});

This awesome code is write by Sacha Schmid, you can se more from this user in the personal repository