DEV Community

Indian Modassir
Indian Modassir

Posted on

Quanter A pure-JavaScript CSS Selector Engine

#javascript #css #webdev #jquick

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

How to install Quanter

To include Quanter in Node, first install with npm.

npm install quanter
Enter fullscreen mode Exit fullscreen mode

How to build Quanter

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

git clone git://github.com/jsvibe/quanter.git
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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";
Enter fullscreen mode Exit fullscreen mode

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);
Enter fullscreen mode Exit fullscreen mode
  • 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>
Enter fullscreen mode Exit fullscreen mode

Quanter Selector Examples (With Multiple Comma-Separated Selectors)

Basic (Comma-separated selectors)

ID + Class Selector

Quanter("#main, .title");
Enter fullscreen mode Exit fullscreen mode

Expected Output:

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

Class + Tag Selector

Quanter(".fruit, h1");
Enter fullscreen mode Exit fullscreen mode

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");
Enter fullscreen mode Exit fullscreen mode

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");
Enter fullscreen mode Exit fullscreen mode

Expected Output:

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

Combinators + Multiple Filters

*Descendant + Direct Child"

Quanter(".products .price, .products > article");
Enter fullscreen mode Exit fullscreen mode

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']");
Enter fullscreen mode Exit fullscreen mode

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)");
Enter fullscreen mode Exit fullscreen mode

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");
Enter fullscreen mode Exit fullscreen mode

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");
Enter fullscreen mode Exit fullscreen mode

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']");
Enter fullscreen mode Exit fullscreen mode

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);
Enter fullscreen mode Exit fullscreen mode
  • 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>
Enter fullscreen mode Exit fullscreen mode

Select all <h1> elements

Quanter.XPathSelect('//h1');
Enter fullscreen mode Exit fullscreen mode

Element with attribute id="main"

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

Attribute starts-with (href starting with /log)

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

Exact text match (li with text "Banana")

Quanter.XPathSelect('//li[text()="Banana"]');
Enter fullscreen mode Exit fullscreen mode

First <li> inside ul.items

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

Last <li> inside ul.items

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

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

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

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

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

Select price of the out-of-stock product

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

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]');
Enter fullscreen mode Exit fullscreen mode

Learn for more documentation

Top comments (3)

Collapse
 
saniya_parween_df4ecbca20 profile image
Saniya Parween •

Wow amazing

Collapse
 
coding_modassir_be62751cb profile image
Coding Modassir •

Very useful for advance DOM Element Selecting for WebDev

Collapse
 
shahadat_gamings_195123b9 profile image
Shahadat Gamings •

I impressed bro your library is very useful, we used this library, your library provide multi selector feature easily