JSFiddle - React, Tailwind, and code Playground

by joplomacedo

HTML

<div class="log"></div>

CSS

.log {
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
	background-color: #444;
	color: #fff;
	padding: 1em;
	font-family: monospace;
}

JavaScript

function log(s) {

	document.querySelector('.log').innerHTML += '<br>' + s;	
}


function calcSpecificity( selector ) {
	var units = selector.split(' ');
	
	units.forEach(function ( unit ) {
		
		var ids = unit.match(/#/g) || []).length;
		var classes = unit.match(/./g) || []).length;
		
	});
	
	return units;
	
}

function compare(a,b){
  // do your own comparison
  
  // count words preceded by
  // hash
  // dots
  // tags
  
  a.string.split('.').split('#');
  
  return b;
}


log(calcSpecificity("body p"));
log(calcSpecificity(".class"));
log(calcSpecificity("div.big div#id.class"));
log(calcSpecificity(".big"));