html 道格拉斯希波利托的钢笔。

Posted 2021-05-11

.container {
  padding: 10px;
  position: relative;
  max-width: 55%;
}

.header {
  overflow: hidden;
  position: absolute;
  left: 10px;
  top: 25%;
}

.title {
  font-size: 2em;
  margin: 0;
  text-align: center;
  color: #007DAD;
}

.check {
  display: none;
}

.button {
  display: inline-block;
  border: 2px solid #E7E7E7;
  color: #BDBDBD;
  padding: 10px;
  margin-top: 10px;
  cursor: pointer;
}

.group-elements {
  padding: 0;
  margin-left: 170px;
}

.group-elements .element {
  display: inline-block;
  background-color: #007DAD;
  text-align: center;
  color:#fff;
  font-size: 2.4em;
  line-height: 50px;
  width: 50px;
  height: 50px;
  margin: 5px;
  border-radius: 50px;
}

.check:checked + .header .button {
  color: #007DAD;
  border-color: #007DAD;
}

.check:checked ~ .group-elements .element {
  background-color: #E7E7E7;  
}

@media only screen and (min-device-width : 320px) and (max-device-width : 480px) {
  
  .container {
    max-width: 100%;
  }
  
  .header {
    overflow: visible;
    position: static;
  }
  
  .button {
    width: 90%;
    text-align: center;
  }
  
  .group-elements {
   margin-left: 0; 
  }
  
  .group-elements .element {
    margin: 8px;
  }
}

(function(global, doc) {
    var container = $('#container'),
        groupElements = $('#group-elements'),
        ruleTitle = $('#rule-title'),
        params = {
          elementsNumber: +urlParam('elements') || 8,
          group: urlParam('group') || '4n+',
          each: urlParam('each') || '2'
        },
        sheetNthRule = $('#nth-rule');
    
    //start
    (function () {
      var css = params.group + params.each;

      addCssNth(css);
      ruleTitle.innerHTML = css;

      addElements(params.elementsNumber);
    }());

    function urlParam(param) {
      var value = false;

      location.search.replace(/[?&]?([^=]+)=([^&]*)/g, function (match, _param, _value) { 
        value = param === _param ? _value : value;
      });

      return value;
    }

    function addElements(quantity) {
      while(quantity--) {
        addNewElement();
      }
    }

    function addNewElement(value) {
      var element = doc.createElement('li'),
          elements = groupElements.querySelectorAll('.element');

      element.className = 'element';
      element.innerHTML = (function () {
        var lastElement,
            group = params.group.toLowerCase(),
            groupNumber = params.group ? params.group.replace(/[^\d]+/, '') : '';

        if(group === 'n') {
          return 1;
        }

        if(groupNumber) {
          lastElement = elements[elements.length - 1] || { innerHTML: null };

          if(group === '0n') {
            return +lastElement.innerHTML + 1;
          }

          value = lastElement.innerHTML === groupNumber ? 1 : +lastElement.innerHTML + 1;
        }

        return value || elements.length + 1;
      }());

      groupElements.appendChild(element);
    }

    function addCssNth(value) {
      var cssText;

      cssText =  '.check:checked ~ .group-elements .element:nth-of-type(' + value + ') { background-color: #007DAD; }';

      if(sheetNthRule.styleSheet) {
        sheetNthRule.styleSheet.cssText = cssText;
      } else {
        sheetNthRule.innerText = cssText;
      }
    }

    function $(selector) {
      return doc.querySelector(selector);
    }

  }(window, document));

nth-of-type example
-------------------


A [Pen](http://codepen.io/douglashipolito/pen/kBqEC) by [Douglas Hipolito](http://codepen.io/douglashipolito) on [CodePen](http://codepen.io/).

[License](http://codepen.io/douglashipolito/pen/kBqEC/license).

<div class="container" id="container">   
  <input type="checkbox" class="check" id="select-elements" />

  <header class="header">
    <h2 id="rule-title" class="title"></h2>
    <label class="select-elements button" for="select-elements">Selected elements</label>
  </header>

  <ul class="group-elements" id="group-elements"></ul>
</div>