<script src="https://code.jquery.com/jquery-3.0.0.js"></script>
<h1>Hierarchy Aware Heading Styles</h1>
<div class="container">
  <h1>Heading Level 1</h1>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maiores, velit sapiente dicta, doloribus architecto eligendi quis, saepe magnam veniam cupiditate quod ratione cumque tempora suscipit officiis incidunt porro eius repudiandae!</p>
  <h2>Heading Level 2</h2>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Harum excepturi dolor nemo nesciunt deserunt natus aut quasi magni corrupti non quaerat, molestiae unde, eveniet tenetur. Error velit odit illum necessitatibus.</p>
  <h3>Heading Level 3</h3>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempore culpa aut inventore harum sunt rerum rem perferendis sequi molestiae provident, accusamus vero at ipsa maiores id, debitis voluptatibus, magni impedit.</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quisquam molestiae a, quibusdam dolor ipsam sint eaque alias corrupti quos unde, mollitia quas odio! Quam deleniti nulla nisi unde, quas iste?</p>
  <h2>Heading Level 2</h2>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Harum excepturi dolor nemo nesciunt deserunt natus aut quasi magni corrupti non quaerat, molestiae unde, eveniet tenetur. Error velit odit illum necessitatibus.</p>
  <h3>Heading Level 3</h3>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempore culpa aut inventore harum sunt rerum rem perferendis sequi molestiae provident, accusamus vero at ipsa maiores id, debitis voluptatibus, magni impedit.</p>
  <h3>Heading Level 3</h3>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quisquam molestiae a, quibusdam dolor ipsam sint eaque alias corrupti quos unde, mollitia quas odio! Quam deleniti nulla nisi unde, quas iste?</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Saepe sapiente voluptas at minima necessitatibus eveniet rem alias sint repudiandae dolorum unde atque numquam architecto ex tempore, voluptates magni. Recusandae, incidunt?</p>
</div>
<div class="container">
  <h1>Heading Level 1</h1>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maiores, velit sapiente dicta, doloribus architecto eligendi quis, saepe magnam veniam cupiditate quod ratione cumque tempora suscipit officiis incidunt porro eius repudiandae!</p>
  <h2>Heading Level 2</h2>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Harum excepturi dolor nemo nesciunt deserunt natus aut quasi magni corrupti non quaerat, molestiae unde, eveniet tenetur. Error velit odit illum necessitatibus.</p>
  <h3>Heading Level 3</h3>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempore culpa aut inventore harum sunt rerum rem perferendis sequi molestiae provident, accusamus vero at ipsa maiores id, debitis voluptatibus, magni impedit.</p>
  <h4>Heading Level 4</h4>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Suscipit pariatur fugit totam aut voluptates facilis corporis officiis, illum ipsum veniam reiciendis ad, laudantium delectus distinctio ea quibusdam tempora quidem! Vel.</p>
  <h3>Heading Level 3</h3>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quisquam molestiae a, quibusdam dolor ipsam sint eaque alias corrupti quos unde, mollitia quas odio! Quam deleniti nulla nisi unde, quas iste?</p>
  <h4>Heading Level 4</h4>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Saepe sapiente voluptas at minima necessitatibus eveniet rem alias sint repudiandae dolorum unde atque numquam architecto ex tempore, voluptates magni. Recusandae, incidunt?</p>
  <h2>Heading Level 2</h2>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Impedit et nam, distinctio eveniet atque ea repudiandae ducimus neque? Quos ut natus officia, ex. Vitae quia voluptate, illo, earum recusandae rerum!</p>
  <h3>Heading Level 3</h3>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Soluta voluptatibus at delectus eligendi debitis dolore mollitia id rem excepturi similique, molestias inventore nulla saepe harum iure veritatis laboriosam et error.</p>
</div>
<div class="container">
  <h1>Heading Level 1</h1>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Natus praesentium exercitationem, facere porro molestias temporibus veniam tempora cupiditate iusto et consectetur repellat possimus quasi sint libero dolorem assumenda dignissimos, at!</p>
  <h2>Heading Level 2</h2>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quos modi, ut harum voluptate repellat dolor quaerat cumque vero unde, aliquam maiores fuga atque omnis id quisquam! Quia voluptate optio dolorem.</p>
  <h2>Heading Level 2</h2>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Placeat quidem officia, ipsum labore, nesciunt molestiae dignissimos omnis quas culpa facere, recusandae pariatur quod harum eum voluptatum facilis qui perspiciatis sit.</p>
</div>
<div class="container">
  <h1>Heading Level 1</h1>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad, libero nam nesciunt aperiam, quia distinctio ex adipisci, qui perferendis culpa repellendus fugit consectetur iste deleniti eos eaque tempora est sed?</p>
  <h2>Heading Level 2</h2>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Porro veritatis ab sequi molestias explicabo rerum, vitae sapiente, odit quae, itaque obcaecati sed eum esse consectetur laudantium blanditiis quaerat consequatur quo!</p>
  <h3>Heading Level 3</h3>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dicta asperiores quis, repudiandae voluptatibus, ipsa tenetur beatae pariatur neque porro vitae dignissimos totam, sequi optio doloribus eligendi, labore aspernatur corporis assumenda!</p>
  <h4>Heading Level 4</h4>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatum, distinctio velit eaque perferendis aliquam sequi repellendus ut ipsam, illum libero, sed corporis. Eligendi nisi voluptatem perferendis laborum consectetur dolorum debitis.</p>
  <h5>Heading Level 5</h5>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Id culpa officiis aperiam quaerat quas impedit sint reiciendis sequi ipsa quod. Et ad quasi esse quod quos magni laborum harum eius!</p>
  <h6>Heading Level 6</h6>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sint molestias repudiandae, qui iure voluptatum id, doloremque in, unde quis voluptatibus placeat architecto officia. Fuga delectus, omnis, eius asperiores provident reiciendis?</p>
  <h3>Heading Level 3</h3>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Beatae placeat provident, nisi velit ab qui! Qui velit at quod, eum iste suscipit quas quis, quam. Commodi dolores assumenda nesciunt tempora?</p>
  <h4>Heading Level 4</h4>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsam nemo consequatur, ipsa tenetur tempore soluta dolorem commodi molestiae ex suscipit, facere vero totam iste natus? Est officia, et dignissimos labore?</p>
  <h5>Heading Level 5</h5>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellendus, asperiores, commodi. At sapiente incidunt eos voluptates dolorum, eum nobis. Illo incidunt corporis pariatur accusamus fuga. A omnis delectus, eligendi incidunt.</p>
  <h6>Heading Level 6</h6>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloribus ducimus hic libero quia sunt dolorum quos laborum repudiandae deserunt asperiores reiciendis labore, provident rerum voluptates expedita repellat voluptas! Quibusdam, voluptate!</p>
  <h2>Heading Level 2</h2>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ut veniam, amet, perspiciatis sint fugiat temporibus recusandae quos, harum molestiae consequuntur quae ratione pariatur rem voluptatem quibusdam, deleniti eos dignissimos accusantium.</p>
  <h3>Heading Level 3</h3>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sapiente dolores dolorem, facilis sit repellat corrupti dolorum hic deleniti possimus excepturi commodi temporibus quis exercitationem, unde distinctio ipsam! Repellat, nesciunt maxime.</p>
  <h3>Heading Level 3</h3>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veritatis saepe iusto laudantium nostrum voluptatum, dolorem accusantium beatae quo. Magni ad provident eum sapiente consectetur quo quidem est corrupti et natus!</p>
</div>

html {
  color: #163010;
  background: #EFF7ED;
  padding: 2em 2em 4em;
  font-family: sans-serif;
}
.container {
  background: #fff;
  padding: 2em 2.5em; margin-top: 1em;
  box-shadow: 0 .25em .25em rgba(0,0,0,.2);
}
.container + .container { margin-top: 2em; }
h1, p { margin-top: .5em; }
h2, h3 { margin-top: .75em; }
h4, h5, h6 { margin-top: 1em; }
h1, h2, h3, h4, h5, h6, p { margin-bottom: 0; }
h1:first-child, h2:first-child, h3:first-child, h4:first-child, h5:first-child, h6:first-child, p:first-child { margin-top: 0; }

/* border on H1 for clear hierarchy */
.container h1 { border-bottom: 1px solid #dadada; }

/* adaptive design for remaining headings */
.container:has(h1) h1,
.container:has(h2) h2,
.container:has(h3) h3,
.container:has(h4) h4,
.container:has(h5) h5,
.container:has(h6) h6 { font-size: 1em; }

.container:has(h2) h1,
.container:has(h3) h2,
.container:has(h4) h3,
.container:has(h5) h4,
.container:has(h6) h5 { font-size: 1.33em; }

.container:has(h3) h1,
.container:has(h4) h2,
.container:has(h5) h3,
.container:has(h6) h4 { font-size: 1.66em; }

.container:has(h4) h1,
.container:has(h5) h2,
.container:has(h6) h3 { font-size: 2em; }

.container:has(h5) h1,
.container:has(h6) h2 { font-size: 2.33em; }

.container:has(h6) h1 { font-size: 2.5em; }

// JS is only used to provide support of the `:has()` CSS selector.

/*!
 * Polyfill.js - v0.1.0
 *
 * Copyright (c) 2015 Philip Walton <http://philipwalton.com>
 * Released under the MIT license
 *
 * Date: 2015-06-21
 */
!function(a,b,c){"use strict";function d(a){return a.replace(/^\s+|\s+$/g,"")}function e(a,b){var c,d=0;if(!a||!b)return!1;for(;c=b[d++];)if(a===c)return!0;return!1}function f(a){return j.test(a)}function g(a){var b,c=0;for(this._rules=[];b=a[c++];)this._rules.push(new h(b))}function h(a){this._rule=a}function i(a){return this instanceof i?(this._options=a,a.keywords||(this._options={keywords:a}),this._promise=[],this._getStylesheets(),this._downloadStylesheets(),this._parseStylesheets(),this._filterCSSByKeywords(),this._buildMediaQueryMap(),this._reportInitialMatches(),void this._addMediaListeners()):new i(a)}var j=RegExp("^"+String({}.valueOf).replace(/[.*+?\^${}()|\[\]\\]/g,"\\$&").replace(/valueOf|for [^\]]+/g,".+?")+"$"),k=function(){var a=b.getElementsByTagName("base")[0],c=/^([a-zA-Z:]*\/\/)/;return function(b){var d=!c.test(b)&&!a||b.replace(RegExp.$1,"").split("/")[0]===location.host;return d}}(),l={matchMedia:a.matchMedia&&a.matchMedia("only all").matches,nativeMatchMedia:f(a.matchMedia)},m=function(){function b(a){for(var b,c=0;b=a[c++];)i[b]||e(b,j)||j.push(b)}function c(){if(0===m.readyState||4===m.readyState){var a;(a=j[0])&&d(a),a||g()}}function d(a){l++,m.open("GET",a,!0),m.onreadystatechange=function(){4!=m.readyState||200!=m.status&&304!=m.status||(i[a]=m.responseText,j.shift(),c())},m.send(null)}function f(a){for(var b,c=0,d=0;b=a[c++];)i[b]&&d++;return d===a.length}function g(){for(var a;a=k.shift();)h(a.urls,a.fn)}function h(a,b){for(var c,d=[],e=0;c=a[e++];)d.push(i[c]);b.call(null,d)}var i={},j=[],k=[],l=0,m=function(){var b;try{b=new a.XMLHttpRequest}catch(c){b=new a.ActiveXObject("Microsoft.XMLHTTP")}return b}();return{request:function(a,d){k.push({urls:a,fn:d}),f(a)?g():(b(a),c())},clearCache:function(){i={}},_getRequestCount:function(){return l}}}(),n={_cache:{},clearCache:function(){n._cache={}},parse:function(a,b){function c(){return g(/^\{\s*/)}function e(){return g(/^\}\s*/)}function f(){var b,c=[];for(h(),i(c);"}"!=a.charAt(0)&&(b=y()||z());)c.push(b),i(c);return c}function g(b){var c=b.exec(a);if(c)return a=a.slice(c[0].length),c}function h(){g(/^\s*/)}function i(a){a=a||[];for(var b;b=j();)a.push(b);return a}function j(){if("/"==a[0]&&"*"==a[1]){for(var b=2;"*"!=a[b]||"/"!=a[b+1];)++b;b+=2;var c=a.slice(2,b-2);return a=a.slice(b),h(),{comment:c}}}function k(){var a=g(/^([^{]+)/);if(a)return d(a[0]).split(/\s*,\s*/)}function l(){var a=g(/^(\*?[\-\w]+)\s*/);if(a&&(a=a[0],g(/^:\s*/))){var b=g(/^((?:'(?:\\'|.)*?'|"(?:\\"|.)*?"|\([^\)]*?\)|[^};])+)\s*/);if(b)return b=d(b[0]),g(/^[;\s]*/),{property:a,value:b}}}function m(){for(var a,b=[];a=g(/^(from|to|\d+%|\.\d+%|\d+\.\d+%)\s*/);)b.push(a[1]),g(/^,\s*/);return b.length?{values:b,declarations:x()}:void 0}function o(){var a=g(/^@([\-\w]+)?keyframes */);if(a){var b=a[1],a=g(/^([\-\w]+)\s*/);if(a){var d=a[1];if(c()){i();for(var f,h=[];f=m();)h.push(f),i();if(e()){var j={name:d,keyframes:h};return b&&(j.vendor=b),j}}}}}function p(){var a=g(/^@supports *([^{]+)/);if(a){var b=d(a[1]);if(c()){i();var h=f();if(e())return{supports:b,rules:h}}}}function q(){var a=g(/^@media *([^{]+)/);if(a){var b=d(a[1]);if(c()){i();var h=f();if(e())return{media:b,rules:h}}}}function r(){var a=g(/^@page */);if(a){var b=k()||[],d=[];if(c()){i();for(var f;f=l()||s();)d.push(f),i();if(e())return{type:"page",selectors:b,declarations:d}}}}function s(){var a=g(/^@([a-z\-]+) */);if(a){var b=a[1];return{type:b,declarations:x()}}}function t(){return w("import")}function u(){return w("charset")}function v(){return w("namespace")}function w(a){var b=g(new RegExp("^@"+a+" *([^;\\n]+);\\s*"));if(b){var c={};return c[a]=d(b[1]),c}}function x(){var a=[];if(c()){i();for(var b;b=l();)a.push(b),i();if(e())return a}}function y(){return o()||q()||p()||t()||u()||v()||r()}function z(){var a=k();if(a)return i(),{selectors:a,declarations:x()}}return b&&n._cache[b]?n._cache[b]:(a=a.replace(/\/\*[\s\S]*?\*\//g,""),n._cache[b]=f())},filter:function(a,b){function c(a,b){return a||b?a?a.concat(b):[b]:void 0}function e(a){null==a.media&&delete a.media,null==a.supports&&delete a.supports,k.push(a)}function f(a,b){if(b)for(var c=b.length;c--;)if(a.indexOf(b[c])>=0)return!0}function g(a,b){for(var c,e,f,g,h=/\*/,i=0;c=b[i++];)if(e=c.split(":"),f=new RegExp("^"+d(e[0]).replace(h,".*")+"$"),g=new RegExp("^"+d(e[1]).replace(h,".*")+"$"),f.test(a.property)&&g.test(a.value))return!0}function h(a,c,d){return b.selectors&&f(a.selectors.join(","),b.selectors)?(e({media:c,supports:d,selectors:a.selectors,declarations:a.declarations}),!0):void 0}function i(a,c,d){if(b.declarations)for(var f,h=0;f=a.declarations[h++];)if(g(f,b.declarations))return e({media:c,supports:d,selectors:a.selectors,declarations:a.declarations}),!0}function j(a,b,d){for(var e,f=0;e=a[f++];)e.declarations?h(e,b,d)||i(e,b,d):e.rules&&e.media?j(e.rules,c(b,e.media),d):e.rules&&e.supports&&j(e.rules,b,c(d,e.supports))}var k=[];return j(a),k}},o=function(){function c(){if(f)return f;var a=b.documentElement,c=b.body,d=a.style.fontSize,e=c.style.fontSize,g=b.createElement("div");return a.style.fontSize="1em",c.style.fontSize="1em",c.appendChild(g),g.style.width="1em",g.style.position="absolute",f=g.offsetWidth,c.removeChild(g),c.style.fontSize=e,a.style.fontSize=d,f}function d(b){return a.matchMedia(b)}function e(a){var d,e,f=!1;return g=b.documentElement.clientWidth,h.test(a)&&(d="em"===RegExp.$2?parseFloat(RegExp.$1)*c():parseFloat(RegExp.$1)),i.test(a)&&(e="em"===RegExp.$2?parseFloat(RegExp.$1)*c():parseFloat(RegExp.$1)),d&&e?f=g>=d&&e>=g:(d&&g>=d&&(f=!0),e&&e>=g&&(f=!0)),{matches:f,media:a}}var f,g,h=/\(min\-width:[\s]*([\s]*[0-9\.]+)(px|em)[\s]*\)/,i=/\(max\-width:[\s]*([\s]*[0-9\.]+)(px|em)[\s]*\)/,j={};return{matchMedia:function(a){return l.matchMedia?d(a):e(a)},clearCache:function(){l.nativeMatchMedia||(g=null,j={})}}}(),p=function(){function b(a,b){var c;return function(){clearTimeout(c),c=setTimeout(a,b)}}var c=function(){var a=[];return{add:function(b,c,d){for(var e,f=0;e=a[f++];)if(e.polyfill==b&&e.mql===c&&e.fn===d)return!1;c.addListener(d),a.push({polyfill:b,mql:c,fn:d})},remove:function(b){for(var c,d=0;c=a[d++];)c.polyfill===b&&(c.mql.removeListener(c.fn),a.splice(--d,1))}}}(),d=function(b){function c(){for(var a,c=0;a=b[c++];)a.fn()}return{add:function(d,e){b.length||(a.addEventListener?a.addEventListener("resize",c,!1):a.attachEvent("onresize",c)),b.push({polyfill:d,fn:e})},remove:function(d){for(var e,f=0;e=b[f++];)e.polyfill===d&&b.splice(--f,1);b.length||(a.removeEventListener?a.removeEventListener("resize",c,!1):a.detachEvent&&a.detachEvent("onresize",c))}}}([]);return{removeListeners:function(a){l.nativeMatchMedia?c.remove(a):d.remove(a)},addListeners:function(a,e){function f(){if(l.nativeMatchMedia)for(var f in h)h.hasOwnProperty(f)&&!function(b,d){c.add(a,b,function(){e.call(a,d,b.matches)})}(h[f],f);else{var i=b(function(a,b){return function(){g(a,b)}}(a,h),a._options.debounceTimeout||100);d.add(a,i)}}function g(a,b){var c,d={};o.clearCache();for(c in b)b.hasOwnProperty(c)&&(d[c]=o.matchMedia(c).matches,d[c]!=i[c]&&e.call(a,c,o.matchMedia(c).matches));i=d}var h=a._mediaQueryMap,i={};!function(){for(var a in h)h.hasOwnProperty(a)&&(i[a]=o.matchMedia(a).matches)}(),f()}}}();g.prototype.each=function(a,b){var c,d=0;for(b||(b=this);c=this._rules[d++];)a.call(b,c)},g.prototype.size=function(){return this._rules.length},g.prototype.at=function(a){return this._rules[a]},h.prototype.getDeclaration=function(){for(var a,b={},c=0,d=this._rule.declarations;a=d[c++];)b[a.property]=a.value;return b},h.prototype.getSelectors=function(){return this._rule.selectors.join(", ")},h.prototype.getMedia=function(){return this._rule.media.join(" and ")},i.prototype.doMatched=function(a){return this._doMatched=a,this._resolve(),this},i.prototype.undoUnmatched=function(a){return this._undoUnmatched=a,this._resolve(),this},i.prototype.getCurrentMatches=function(){for(var a,b,c=0,d=[];a=this._filteredRules[c++];)b=a.media&&a.media.join(" and "),(!b||o.matchMedia(b).matches)&&d.push(a);return new g(d)},i.prototype.destroy=function(){this._undoUnmatched&&(this._undoUnmatched(this.getCurrentMatches()),p.removeListeners(this))},i.prototype._defer=function(a,b){a.call(this)?b.call(this):this._promise.push({condition:a,callback:b})},i.prototype._resolve=function(){for(var a,b=0;a=this._promise[b];)a.condition.call(this)?(this._promise.splice(b,1),a.callback.call(this)):b++},i.prototype._getStylesheets=function(){var a,c,d,f,g,h,i,j=0,l=[];if(this._options.include){for(c=this._options.include;a=c[j++];)if(d=b.getElementById(a)){if("STYLE"===d.nodeName){i={text:d.textContent},l.push(i);continue}if(d.media&&"print"==d.media)continue;if(!k(d.href))continue;i={href:d.href},d.media&&(i.media=d.media),l.push(i)}}else{for(c=this._options.exclude,f=b.getElementsByTagName("link");d=f[j++];)d.rel&&"stylesheet"==d.rel&&"print"!=d.media&&k(d.href)&&!e(d.id,c)&&(i={href:d.href},d.media&&(i.media=d.media),l.push(i));for(h=b.getElementsByTagName("style"),j=0;g=h[j++];)i={text:g.textContent},l.push(i)}return this._stylesheets=l},i.prototype._downloadStylesheets=function(){for(var a,b=this,c=[],d=0;a=this._stylesheets[d++];)c.push(a.href);m.request(c,function(a){for(var c,d=0;c=a[d];)b._stylesheets[d++].text=c;b._resolve()})},i.prototype._parseStylesheets=function(){this._defer(function(){return this._stylesheets&&this._stylesheets.length&&this._stylesheets[0].text},function(){for(var a,b=0;a=this._stylesheets[b++];)a.rules=n.parse(a.text,a.url)})},i.prototype._filterCSSByKeywords=function(){this._defer(function(){return this._stylesheets&&this._stylesheets.length&&this._stylesheets[0].rules},function(){for(var a,b,c=[],d=0;a=this._stylesheets[d++];)b=a.media,b&&"all"!=b&&"screen"!=b?c.push({rules:a.rules,media:a.media}):c=c.concat(a.rules);this._filteredRules=n.filter(c,this._options.keywords)})},i.prototype._buildMediaQueryMap=function(){this._defer(function(){return this._filteredRules},function(){var a,b,c=0;for(this._mediaQueryMap={};b=this._filteredRules[c++];)b.media&&(a=b.media.join(" and "),this._mediaQueryMap[a]=o.matchMedia(a))})},i.prototype._reportInitialMatches=function(){this._defer(function(){return this._filteredRules&&this._doMatched},function(){this._doMatched(this.getCurrentMatches())})},i.prototype._addMediaListeners=function(){this._defer(function(){return this._filteredRules&&this._doMatched&&this._undoUnmatched},function(){p.addListeners(this,function(a,b){for(var c,d=0,e=[],f=[];c=this._filteredRules[d++];)c.media&&c.media.join(" and ")==a&&(b?e:f).push(c);e.length&&this._doMatched(new g(e)),f.length&&this._undoUnmatched(new g(f))})})},i.modules={DownloadManager:m,StyleManager:n,MediaManager:o,EventManager:p},i.constructors={Ruleset:g,Rule:h},a.Polyfill=i}(window,document);

Polyfill({
  selectors: [":has"]
}).doMatched(rules => {
  rules.each(rule => {
    // just pass it into jQuery since it supports `:has`
    $(rule.getSelectors()).css(rule.getDeclaration())
        console.log("yay!")
  });
});