Skip to content

Home

Jump to bottom
Shahzada Modassir edited this page Jan 25, 2024 · 21 revisions

npm version pseudos cdn link followers download npm dependents release date

Project Home Page | Source Repository | Deployed Source | Learn Snizzle | Includes Features

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

Snizzle 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 Pseudo Selectors

  • :get/:post Form elements with the specified method get or post
  • :required Input required elements.
  • :readonly 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.
  • :name All form elements or Select elements with name="username" named value Like username.
  • :writable Writable none-readonly/none-disabled Input elements
  • :input Input elements
  • :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, :tel, :number Input elements with the specified type.

Positional Pseudo Selectors

  • :center Finds the exact proper middle element with equal both sides
  • :skip Skip elements at indexed specified range
  • :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

Script Pseudo Selectors

  • :intscript/:extscript The internal/external script
  • :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.
  • :match(REGEX) Elements with textContent containing the word '/(?:foo|bar)/' Regular-expression.
  • :icontains(TEXT) Elements with textContent containing the word 'TEXT'. Case-insensitive.

CSS3 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)
  • :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)
  • :has(input)
  • :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.
  • :data(name)
  • :editable Containing the contenteditable=true attribute.
  • :active Focused or active Elements.
  • :inline Inline elements (img, input, meta, area...) etc.
  • :charset(utf-8) Selects all elements that match the specified charset code. (Unavailable 🚫)

Combinators

  • > 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 Snizzle public API

Public API

Snizzle(String selector, DOMNode context, Array results, /* Array seed (optional)*/);

The main function for finding elements. Uses querySelectorAll if available.
Returns (Array[]): All elements matching the selector
Parameters
selector A CSS selector or CSS :pseudo
context An element, document, or document fragment to use as the context for finding elements. Defaults to document
results An array or an array-like object, to which Sizzle will append results.
seed(optional) All document elements list, will set a new Context

Snizzle.matches(String selector, Array<DOMElement> elements)

Returns (Array[]): Elements in the array that match the given selector
Parameters
selector A CSS selector or CSS :pseudo
elements An array of DOMElements to filter against the specified selector

Clone this wiki locally