Template.match('*', function () {
  return this;
});

Template.match('table', function (vars) {
  return '<table class="' + this.getAttribute('class') + '">' + Template.applyTemplates(this.childNodes) + '</table>';
});

Template.match('table th', function (vars) {
  var out = '';
  var that = this;
  vars.title.forEach(function (val) {
    out += '<th id="' + Template.generateId(that) + '"' + (Template.current.position() == Template.current.last() ? ' class="last"' : '') + '>' + val + '</th>';
  });
  return out;
});

Template.match('table th:first-child', function (vars) {
  return '<th id="' + Template.generateId(this) + '">' + vars.title[Template.position()] + '</th>';
});

Template.match('div[data-widget]', function (vars) {
  // super awesome stuff goes here
});

Template.match('.content div[data-widget]', function (vars) {
  // this is more specific than the above example
});

// use sizzle for matching
// write something to find out the best matching css Selector and apply the corresponding template rule -> http://specificity.keegan.st/