Working with Selector Functions

As of version 0.10, eCSStender began supporting extension registration and lookups using functions. This subtle addition allows for much more precision when requesting style information.

Within a selector function, the keyword this represents the selector string itself, allowing you to manipulate it or run one or more Regular Expression matches against it. For example:

eCSStender.register(
  {
    'selector': function(){
      // register on all selectors containing h1
      return this.match(/\s*?h1\s*?/) !== null;
    }
  },
  '*',
  function( selector, properties, media, specificity ){
    // do something here
  });

or

var matches = eCSStender.lookup(
  {
    'selector': function(){
      // return all blocks with selectors containing both h1 and strong
      return ( this.match(/\s*?h1\s*?/) !== null &&
               this.match(/\s*?strong\s*?/) !== null );
    }
  },
  '*'
);