Quanter A pure JavaScript CSS Selector Engine – ██FR█████ █INTELL███████████

This content originally appeared on DEV Community and was authored by indian modassir

A Pure-JavaScript, CSS selector engine designed to be easily select DOM-Elements.

Browser support

How to install Quanter

To include Quanter in Node, first install with npm.

npm install quanter

How to build Quanter

Clone a copy of the main Sizzle git repo by running:

git clone git://github.com/jsvibe/quanter.git

In the quanter/dist folder you will find build version of sizzle along with the minified copy and associated map file.

Including Quanter

Below are some of the most common ways to include Quanter.

Browser

<script src="https://cdn.jsdelivr.net/npm/quanter@4.4.0/dist/quanter.min.js"></script>

Webpack / Browserify / Babel

There are several ways to use Webpack, Browserify or Babel. For more information on using these tools, please refer to the corresponding project’s documentation. In the script, including Quanter will usually look like this:

import quanter from "quanter";

Quanter library includes all types of selectors. This will prove to be a good useful library for your web applications and projects.

Quanter library does a lot with less code. It shortens the code used in your projects or web applications. Due to which the performance of your webapp or projects will remain good. It selects advanced and complicated selectors of DOM elements very easily and in less code. This will save you coding time and writing more code.

Form & CSS3 Pseudo Selectors

:get/:post Form elements with the specified method get or post
:required Input required elements.
:read-only Input readOnly elements.
:valid/:invalid Input valid field elements. / Input invalid field elements.
:optional Element that does not have the required attribute set on it.
:writable Writable none-readonly/none-disabled Input elements
:input Input elements
:indeterminate Matches form controls (e.g., checkboxes) in an indeterminate state.
:open Matches elements like <details>/<dialog> that are currently open.
:out-of-range Matches input elements whose value is outside the allowed range.
:in-range Matches input elements whose value is within the allowed range.
:link Matches <a> or <area> elements with an unvisited hyperlink.
:modal Matches elements (like dialogs) that are displayed as modal dialogs.
:paused Matches media elements (e.g.,<video>) that are currently paused.
:muted Matches media elements that are muted.
:autoplay Matches media elements that are set to autoplay.
:picture-in-picture Matches video elements that are in picture-in-picture mode.
:popover-open Matches elements with the popover attribute that are currently shown.
:fullscreen Matches the element that is currently in fullscreen mode.
:playing Matches media elements that are currently playing.
:defined Matches custom elements that have been defined with customElements.define().
:dir Matches elements based on text direction: e.g., :dir(ltr) or :dir(rtl).
:default Input default checked or option default selected elements.
:button Input elements that are buttons or have type “button”
:checkbox, :file, :image, :password, :radio, :reset, :submit, :text, :search, :range, :url, :color, :email, :number Input elements with the specified type.

Positional Pseudo Selectors

:first/:last The first/last matching element
:eq/:nth The nth element; e.g. :eq(6) finds the 7th element
:lt/:gt Elements at positions above/below the specified position
:odd/:even Even/odd-numbered elements
:fixed Matching position:fixed element

Script Pseudo Selectors

:importmap/:ecmascript The type=”ecmascript|importmap” script element
:json Script elements with type application/json
:module Script elements with type module

Meta Pseudo Selectors

:theme All theme-color or address-bar color-theme meta elements.
:viewport Meta viewport element. <meta name="viewport" content="width=device-width, initial-scale=1.0">

Containing Pseudo Selectors

:contains(TEXT) Elements with textContent containing the word ‘TEXT’. Case-sensitive.
:rcontains(REGEX) Elements with textContent containing the word ‘/(?:foo|bar)/’ Regular-expression.
:icontains(TEXT) Elements with textContent containing the word ‘TEXT’. Case-insensitive.
:ircontains(REGEX) Elements with textContent containing the word ‘/(?:foo|bar)/’ Regular-expression Case-insensitive.

CSS3 CHILD Pseudo Selectors

:nth-last-of-type(n) The pattern for matching elements, counting from the end.
:first-child The first matching element among a group of sibling elements.
:first-of-type The first element of its typee among a group of sibling elements.
:last-child The last matching element among a group of sibling elements.
:last-of-type The last element of its typee among a group of sibling elements.
:nth-child(n) Takes a single argument that describes a pattern for matching element indices in a list of siblings.
:only-of-type The represents an element that has no siblings of the same type.
:nth-of-type(n) The matches elements based on their position among siblings of the same type (tag name).
:nth-last-child(n) The matches elements based on their position among a group of siblings, counting from the end.
:only-child The represents an element without any siblings. :first-child:last-child or :nth-child(1):nth-last-child(1), but with a lower specificity.

Others Pseduo Selectors

:parent Elements with at least one child node (either text or an element).
:empty The :empty represents any element that has no children.
:not(h1) Selects elements that do not match the given selector inside the :not(...).
:lang(en) Selects all elements that match the specified language code.
:target Element id matching from origin #hash
:focus Focusable focused elements.
:checked Input checked elements or select in option selected elements.
:enabled/:disabled The enabled Select none-disabled Elements. and disabled Select disabled Elements.
:root Root elements html
:selected (option) elements that are currently selected
:link A proper valid anchor Elements with none-empty href
:filter(h2) Filter matched element of given elements list.
:where(h2, h3) Similar to :is(...), but has no specificity weight.
:has(input) Selects elements that contain an <input> element inside them.
:visible/:hidden hidden or visible elements. Support (visibility, hidden, display)
:header Header elements (h1, h2, h3, h4, h5, h6).
:animated Elements that have CSS animation.
:offset none-static position elements.
:editable Containing the contenteditable=true attribute.
:active Focused or active Elements.
:inline Inline elements (img, input, meta, area…) etc.
:xpath(expr) Select elements using from XPath expression.
:role(button)
:charset(utf-8) Selects all elements that match the specified charset code. (Unavailable )

Combinators

< The child selector selects all elements that are the parent of a specified element.
> The child selector selects all elements that are the children of a specified element.
+ The adjacent sibling selector is used to select an element that is directly after another specific element.
~ The general sibling selector selects all elements that are next siblings of a specified element.
The descendant selector matches all elements that are descendants of a specified element.

API

How to use and configure Quanter public API

Public API

The Quanter method allows for flexible element selection using a wide range of selector types:

CSS Selectors

Supports tag names, class selectors (.class), ID selectors (#id), attribute selectors ([attr=value]), and pseudo-classes (like :nth-child, :first-of-type, etc.).
Limited XPath Support

Basic XPath expressions are supported, but with limited syntax recognition. Use only for simple XPath needs.

Best Use: When your use case involves a mix of CSS-style selectors and simple XPath, and you want to avoid switching methods.

Signature and Parameters:

Quanter(String expr, DOMNode context, Array results, Array seed);

selector [required] A CSS Selector or XPath Expression (comma separated or non-comma separated)
context [optional] An element, document, or document fragment to use as the context for finding elements.
results [optional] An optional array to which the matched elements will be added.
seed [optional] A set of elements to match against

Example

Sample HTML

<div id="main">
  <h1 class="title">Welcome</h1>

  <ul class="items">
    <li data-id="1" class="fruit">Apple</li>
    <li data-id="2" class="fruit special">Banana</li>
    <li data-id="3" class="fruit">Cherry</li>
  </ul>

  <p class="info">Contact us at <span>support@example.com</span></p>

  <div class="products">
    <article data-stock="true" data-type="phone">
      <h2>iPhone 15</h2>
      <span class="price">$999</span>
    </article>
    <article data-stock="false" data-type="phone">
      <h2>Galaxy S25</h2>
      <span class="price">$899</span>
    </article>
    <article data-stock="true" data-type="laptop">
      <h2>MacBook Pro</h2>
      <span class="price">$1999</span>
    </article>
  </div>

  <a href="/login">Login</a>
  <a href="/register">Register</a>
</div>

Quanter Selector Examples (With Multiple Comma-Separated Selectors)

Basic (Comma-separated selectors)

ID + Class Selector

Quanter("#main, .title");

Expected Output:

<div id="main">...</div>
<h1 class="title">Welcome</h1>

Class + Tag Selector

Quanter(".fruit, h1");

Expected Output:

<li data-id="1">Apple</li>
<li data-id="2" class="fruit special">Banana</li>
<li data-id="3">Cherry</li>
<h1 class="title">Welcome</h1>

Attribute + Positional

Attribute Equals + First Child

Quanter("li[data-id='2'], ul.items li:first-child");

Expected Output:

<li data-id="2" class="fruit special">Banana</li>
<li data-id="1">Apple</li>

Attribute Contains + Last Child

Quanter("a[href*='reg'], ul.items li:last-child");

Expected Output:

<a href="/register">Register</a>
<li data-id="3">Cherry</li>

Combinators + Multiple Filters

*Descendant + Direct Child“

Quanter(".products .price, .products > article");

Expected Output:

All <span class="price"> elements inside .products
All direct <article> elements inside .products

Multiple Attributes

Quanter("article[data-stock='true'][data-type='phone'], article[data-type='laptop']");

Expected Output:

<article data-stock="true" data-type="phone">iPhone 15</article>
<article data-stock="true" data-type="laptop">MacBook Pro</article>

Pseudo & Complex Chains

First-child + Not Selector

Quanter("ul.items li:first-child, li:not(.special)");

Expected Output:

<li data-id="1">Apple</li>
<li data-id="1">Apple</li> (duplicate match from both selectors)
<li data-id="3">Cherry</li>

Contains Text + Class

Quanter(":contains('Apple'), .special");

Expected Output:

<li data-id="1">Apple</li>
<li data-id="2" class="fruit special">Banana</li>

Advanced Combined Queries

Grouping Complex Paths

Quanter("div#main .products > article[data-stock='true'] .price, li.fruit:last-child");

Expected Output:

<span class="price">$999</span> (iPhone 15)
<span class="price">$1999</span> (MacBook Pro)
<li data-id="3">Cherry</li>

Universal Selector with Attribute Filter + Multiple Tags

Quanter("*[data-id], h1, a[href='/login']");

Expected Output:

All <li> elements with data-id (Apple, Banana, Cherry)
<h1 class="title">Welcome</h1>
<a href="/login">Login</a>

Notes

All selectors here are comma-separated to demonstrate grouping in Quanter.
You can mix any number of selectors in one Quanter call.
Duplicate matches will not be automatically removed; use Array.from(new Set(...)) if needed.

Learn for more documentation

XPath Selector

The XPathSelect method is a specialized function built to handle full XPath syntax, offering complete support for:

Complex queries
Nested expressions
Axes like following-sibling, ancestor, descendant
Functions like contains(), starts-with(), text(), etc.

Best Use: When your use case requires powerful and deeply nested element queries using the full capabilities of XPath.

Signature and Parameters:

Quanter.XPathSelect(String expr, DOMNode context, Array results, Array seed);

expr[required] A XPath Expression (comma separated or non-comma separated)
context [optional] An element, document, or document fragment to use as the context for finding elements.
results [optional] An optional array to which the matched elements will be added.
seed [optional] A set of elements to match against

Example

Sample HTML

<html>
  <body>
    <div id="main">
      <h1 class="title">Welcome</h1>
      <ul class="items">
        <li data-id="1">Apple</li>
        <li data-id="2">Banana</li>
        <li data-id="3">Cherry</li>
      </ul>
      <a href="/login">Login</a>
      <p>  Contact us at <span>support@example.com</span>  </p>
      <div class="footer">© 2025 Company</div>
      <section class="products">
        <article data-stock="true">
          <h2>iPhone 15</h2>
          <span class="price">$999</span>
        </article>
        <article data-stock="false">
          <h2>Galaxy S25</h2>
          <span class="price">$899</span>
        </article>
      </section>
    </div>
  </body>
</html>

Select all <h1> elements

Quanter.XPathSelect('//h1');

Element with attribute id="main"

Quanter.XPathSelect('//*[@id="main"]');

Attribute starts-with (href starting with /log)

Quanter.XPathSelect('//a[starts-with(@href, "/log")]');

Exact text match (li with text “Banana”)

Quanter.XPathSelect('//li[text()="Banana"]');

First <li> inside ul.items

Quanter.XPathSelect('//ul[@class="items"]/li[1]');

Last <li> inside ul.items

Quanter.XPathSelect('//ul[@class="items"]/li[last()]');

Following sibling of <a> (first <p> after it)

Quanter.XPathSelect('//a/following-sibling::p[1]');

Select products that are in stock (data-stock="true")

Quanter.XPathSelect('//section[@class="products"]/article[@data-stock="true"]');

Select price of the out-of-stock product

Quanter.XPathSelect('//article[@data-stock="false"]/span[@class="price"]/text()');

Usage Multiple Expr With Comma Separated

Quanter.XPathSelect('//article[@data-stock="false"]/span[@class="price"]/text(), //section[@class="products"]/article[@data-stock="true"], //a/following-sibling::p[1]');

Learn for more documentation

This content originally appeared on DEV Community and was authored by indian modassir