Skip to content

Home

Jump to bottom
Indian Modassir edited this page Aug 12, 2025 · 26 revisions

npm version pseudos cdn link followers download npm dependents release date

Project Home Page | Source Repository | Learn Quanter | Includes Features

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., ) 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

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

Learn for more documentation

Clone this wiki locally