How to create plugins in Sizzle?

The answer, without jquery

Sample filter extension:

Sizzle.selectors.filters.vazio = function( elem ) {
    return elem.childElementCount === 0;
};  

a working example in jsfiddle

According to the documentation, one can extend

• Selectors:

  Sizzle.selectors.find.NAME = function( match, context, isXML ) {}

• Filters:

  Sizzle.selectors.preFilter.NAME = function( match ) {}

  or

  Sizzle.selectors.filter.NAME: function( element, match1[, match2, match[3], ...]

• Attributes:

  Sizzle.selectors.attrHandle.LOWERCASE_NAME = function( elem, casePreservedName, isXML ) {}

• Pseudo Selectors:

  Sizzle.selectors.pseudos.NAME = function( elem ) {}

Full documentation

Checking the documentation here , I found the easiest is:

JS:

$.extend($.expr[':'],{
  inline: function(elemento) {
    console.log(elemento, $(elemento).css('display'))
    return $(elemento).css('display') === 'inline';
  }
});
$(':inline').addClass('mostra-inline');

HTML for testing:

<div id="teste">
  <div class="inline">essa DIV é inline porque o CSS definiu</div>
  <br><br>
  <span>esse SPAN é inline por default</span>
  <br><br>
  <div>DIVs sao block</div>
</div>

See a working example on jsfiddle