### Install Dependencies and Run Tests

Source: https://github.com/jquery/sizzle/blob/main/README.md

Install project dependencies using npm and run tests. Optionally install grunt-cli globally. Tests can be run via npm or grunt, with Browserstack support if credentials are set.

```bash
npm install
npm test
```

--------------------------------

### Clone Sizzle Repository

Source: https://github.com/jquery/sizzle/blob/main/README.md

Clone the main Sizzle git repository to start development. Ensure you have git installed.

```bash
git clone git@github.com:jquery/sizzle.git
```

--------------------------------

### Start Development Server with Grunt

Source: https://github.com/jquery/sizzle/blob/main/README.md

Run this command to continuously lint, build, and test files as you make changes. It helps in an iterative development process.

```bash
npm start
grunt start
```

--------------------------------

### Basic :nth-child() Examples

Source: https://github.com/jquery/sizzle/blob/main/speed/data/selector.html

Demonstrates selecting odd and even rows in an HTML table using :nth-child() with integer and keyword arguments.

```css
tr:nth-child(2n+1) /* represents every odd row of an HTML table */
tr:nth-child(odd)  /* same */
tr:nth-child(2n+0) /* represents every even row of an HTML table */
tr:nth-child(even) /* same */
```

--------------------------------

### Type Selector Example

Source: https://github.com/jquery/sizzle/blob/main/speed/data/selector.html

Represents an 'h1' element in the document tree.

```css
h1
```

--------------------------------

### Simulated ::first-line Tag Sequence in HTML

Source: https://github.com/jquery/sizzle/blob/main/speed/data/selector.html

Illustrates how a user agent might represent the ::first-line pseudo-element within an HTML paragraph using fictional start and end tags.

```html
<P>**<P::first-line>** This is a somewhat long HTML 
				paragraph that **</P::first-line>** will be broken into several
				lines. The first line will be identified 
				by a fictional tag sequence. The other lines 
				will be treated as ordinary lines in the 
				paragraph.</P>
```

--------------------------------

### General Sibling Combinator Example

Source: https://github.com/jquery/sizzle/blob/main/speed/data/selector.html

The general sibling combinator (~) selects elements that are siblings of a preceding element, sharing the same parent. This example shows how a 'pre' element following an 'h1' is represented.

```html
<h1>Definition of the function a</h1>
			<p>Function a(x) has to be applied to all figures in the table.</p>
			<pre>function a(x) = 12x/13.5</pre>
```

--------------------------------

### Select object with type starting with 'image/'

Source: https://github.com/jquery/sizzle/blob/main/speed/data/selector.html

Matches an 'object' element where the 'type' attribute's value begins with 'image/'.

```css
object[type^="image/"]
```

--------------------------------

### Descendant Combinator Example

Source: https://github.com/jquery/sizzle/blob/main/speed/data/selector.html

Selects an `em` element that is a descendant of an `h1` element.

```css
h1 em
```

--------------------------------

### Create Custom Pseudo-selector with Arguments

Source: https://github.com/jquery/sizzle/wiki/Home

Use `Sizzle.selectors.createPseudo` to implement custom pseudo-selectors that accept arguments. This example shows the implementation of `:not(<sub-selector>)`.

```javascript
Sizzle.selectors.pseudos.not =
    Sizzle.selectors.createPseudo(function( subSelector ) {
        var matcher = Sizzle.compile( subSelector );
        return function( elem ) {
            return !matcher( elem );
        };
    });
```

--------------------------------

### Child Combinator Example

Source: https://github.com/jquery/sizzle/blob/main/speed/data/selector.html

Selects a `p` element that is a direct child of a `body` element.

```css
body > p
```

--------------------------------

### Adjacent Sibling Combinator Example

Source: https://github.com/jquery/sizzle/blob/main/speed/data/selector.html

Selects a `p` element that immediately follows a `math` element.

```css
math + p
```

--------------------------------

### Creating a Drop Cap with First Letter Styling

Source: https://github.com/jquery/sizzle/blob/main/speed/data/selector.html

This example demonstrates how to create a drop cap effect by styling the ::first-letter pseudo-element. It uses CSS to make the first letter larger, bolder, and float to the left, spanning multiple lines.

```html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<HTML>
<HEAD>
<TITLE>Drop cap initial letter</TITLE>
<STYLE type="text/css">
P               { font-size: 12pt; line-height: 1.2 }
P::first-letter { font-size: 200%; font-weight: bold; float: left }
SPAN            { text-transform: uppercase }
</STYLE>
</HEAD>
<BODY>
<P><SPAN>The first</SPAN> few words of an article
in The Economist.</P>
</BODY>
</HTML>
```

--------------------------------

### Select span with exact class value

Source: https://github.com/jquery/sizzle/blob/main/speed/data/selector.html

Matches a span element where the class attribute is exactly 'example'.

```css
span[class="example"]
```

--------------------------------

### :nth-last-child() Examples

Source: https://github.com/jquery/sizzle/blob/main/speed/data/selector.html

Shows how to select the last two rows of a table and all odd elements counting from the end using :nth-last-child().

```css
tr:nth-last-child(-n+2)    /* represents the two last rows of an HTML table */
foo:nth-last-child(odd)    /* represents all odd foo elements in their parent element,
counting from the last one */
```

--------------------------------

### CSS Level 2 Selector Example

Source: https://github.com/jquery/sizzle/blob/main/speed/data/selector.html

This example demonstrates a CSS Level 2 selector that matches all anchor elements with a 'name' attribute within an h1 element. It illustrates the use of type selectors and attribute selectors.

```css
h1 a[name]
```

--------------------------------

### :nth-child() with Whitespace

Source: https://github.com/jquery/sizzle/blob/main/speed/data/selector.html

Provides valid examples of :nth-child() syntax incorporating whitespace around operators and numbers.

```css
:nth-child( 3n + 1 )
:nth-child( +3n - 2 )
:nth-child( -n+ 6)
:nth-child( +6 )
```

--------------------------------

### Backwards-Compatible Custom Pseudo-selector with Arguments

Source: https://github.com/jquery/sizzle/wiki/Home

This example demonstrates how to create a case-insensitive 'contains' pseudo-selector that works with all versions of Sizzle by checking for `createPseudo`.

```javascript
// An implementation of a case-insensitive contains pseudo
// made for all versions of jQuery
(function( $ ) {

function icontains( elem, text ) {
    return (
        elem.textContent ||
        elem.innerText ||
        $( elem ).text() ||
        ""
    ).toLowerCase().indexOf( (text || "").toLowerCase() ) > -1;
}

$.expr.pseudos.icontains = $.expr.createPseudo ?
    $.expr.createPseudo(function( text ) {
        return function( elem ) {
            return icontains( elem, text );
        };
    }) :
    function( elem, i, match ) {
        return icontains( elem, match[3] );
    };

})( jQuery );
```

--------------------------------

### Selector Specificity Calculation Examples

Source: https://github.com/jquery/sizzle/blob/main/speed/data/selector.html

Illustrates the calculation of selector specificity based on the number of ID, class/attribute/pseudo-class, and type/pseudo-element selectors. Specificity is represented as a-b-c.

```css
/* a=0 b=0 c=0 -> specificity =   0 */
*
			/* a=0 b=0 c=1 -> specificity =   1 */
			LI
			/* a=0 b=0 c=2 -> specificity =   2 */
			UL LI
			/* a=0 b=0 c=3 -> specificity =   3 */
			UL OL+LI
			/* a=0 b=1 c=1 -> specificity =  11 */
			H1 + *[REL=up]
			/* a=0 b=1 c=3 -> specificity =  13 */
			UL OL LI.red
			/* a=0 b=2 c=1 -> specificity =  21 */
			LI.red.level
			/* a=1 b=0 c=0 -> specificity = 100 */
			#x34y
			/* a=1 b=0 c=1 -> specificity = 101 */
			#s12:not(FOO)
```

--------------------------------

### Selector Grammar: Class Selector

Source: https://github.com/jquery/sizzle/blob/main/speed/data/selector.html

Defines a class selector, which starts with a dot followed by an identifier.

```css
class
		: '.' IDENT
		;
```

--------------------------------

### Selector Grammar: Simple Selector Sequence

Source: https://github.com/jquery/sizzle/blob/main/speed/data/selector.html

Defines a simple selector sequence, which can start with a type selector or universal selector, followed by zero or more ID, class, attribute, pseudo, or negation components. Alternatively, it can consist of one or more of these components without a preceding type or universal selector.

```css
simple_selector_sequence
		: [ type_selector | universal ]
		[ HASH | class | attrib | pseudo | negation ]*
		| [ HASH | class | attrib | pseudo | negation ]+
```

--------------------------------

### Invalid :nth-child() Syntax with Whitespace

Source: https://github.com/jquery/sizzle/blob/main/speed/data/selector.html

Shows examples of invalid :nth-child() syntax where whitespace placement breaks the grammar.

```css
:nth-child(3 n)
:nth-child(+ 2n)
:nth-child(+ 2)
```

--------------------------------

### CSS ::first-line Pseudo-element Example

Source: https://github.com/jquery/sizzle/blob/main/speed/data/selector.html

Applies uppercase text transformation to the first formatted line of all paragraph elements. This pseudo-element does not match a real document element but is inserted by user agents.

```css
p::first-line { text-transform: uppercase }
```

--------------------------------

### Select a with hreflang prefix value

Source: https://github.com/jquery/sizzle/blob/main/speed/data/selector.html

Matches an 'a' element where the 'hreflang' attribute's value starts with 'en' followed by a hyphen, or is exactly 'en'.

```css
a[hreflang|="en"]
```

--------------------------------

### Selector Grammar: Pseudo-class or Pseudo-element

Source: https://github.com/jquery/sizzle/blob/main/speed/data/selector.html

Defines a pseudo-class or pseudo-element, starting with a colon (single for pseudo-class, double for pseudo-element). It can be an identifier or a functional pseudo.

```css
pseudo
		/* '::' starts a pseudo-element, ':' a pseudo-class */
		/* Exceptions: :first-line, :first-letter, :before and :after. */
		/* Note that pseudo-elements are restricted to one per selector and */
		/* occur only in the last simple_selector_sequence. */
		: ':' ':'? [ IDENT | functional_pseudo ]
		;
```

--------------------------------

### Define a custom pseudo-selector in Sizzle

Source: https://github.com/jquery/sizzle/wiki/Home

This example demonstrates how to add a new pseudo-selector, such as ':fixed', to Sizzle. It requires defining a function that checks a specific CSS property of an element.

```javascript
var $test = jQuery( document );
Sizzle.selectors.pseudos.fixed = function( elem ) {
    $test[ 0 ] = elem;
    return $test.css( "position" ) === "fixed";
};
```

--------------------------------

### Select an empty p element

Source: https://github.com/jquery/sizzle/blob/main/speed/data/selector.html

The :empty pseudo-class selects an element that has no child elements or text nodes. This example shows how to select an empty paragraph.

```css
p:empty
```

--------------------------------

### Implement and Extend Set Filters

Source: https://github.com/jquery/sizzle/wiki/Home

Demonstrates how to implement a set filter like `:first` and how to extend Sizzle by renaming selectors, such as changing `:first` to `:uno`.

```javascript
var first = function( elements, argument, not ) {
    // No argument for first
    return not ? elements.slice( 1 ) : [ elements[0] ];
};
Sizzle.selectors.setFilters.first = first;
```

```javascript
Sizzle.selectors.match.POS = new RegExp( oldPOS.source.replace("first", "uno"), "gi" );
Sizzle.selectors.setFilters.uno = Sizzle.selectors.setFilters.first;
delete Sizzle.selectors.setFilters.first;
Sizzle("div:uno"); // ==> [ <div> ]
```

--------------------------------

### Build and Test Sizzle with Grunt

Source: https://github.com/jquery/sizzle/blob/main/README.md

Use Grunt to lint, build, test, and compare the sizes of built files. This command is useful for a full development cycle.

```bash
npm run build
grunt
```

--------------------------------

### Display Grunt Help

Source: https://github.com/jquery/sizzle/blob/main/README.md

View all available commands and options for Grunt within the Sizzle project.

```bash
grunt -help
```

--------------------------------

### Sizzle Initialization and Parameter Parsing

Source: https://github.com/jquery/sizzle/blob/main/speed/data/selector.html

This snippet initializes Sizzle's test suite and callback mechanism by parsing URL parameters. It handles engine selection and conditionally nullifies querySelector/querySelectorAll for testing purposes.

```javascript
var suite, callback;
(function() {
  var parts, engine, params = {}, search = location.search.substring(1).split("&"), i = 0, len = search.length;
  // Construct parameters object
  for ( ; i < len; i++ ) {
    parts = search[i].split("=");
    params[ decodeURIComponent(parts[0]) ] = parts[1] ? decodeURIComponent( parts[1] ) : "true";
  }
  suite = params.suite;
  callback = params.callback;
  if ( (engine = params.engine) && engine !== "qsa" ) {
    // Nullify QSA for testing
    // unless otherwise specified
    if ( params.qsa !== "true" ) {
      document.querySelector = document.querySelectorAll = null;
    }
    if ( engine === "sizzle" ) {
      engine = "../../dist/sizzle.js";
    } else {
      engine = "../../external/" + engine + ".js";
    }
    document.write("<scr" + "ipt src='" + engine + "'></scr" + "ipt>");
  }
})();

// Using OR here to throw an error if one is present but not the other
// Does not throw an error if someone is just looking at this page
if ( suite != null || callback != null ) {
  window.parent.iframeCallbacks[ suite ][ callback ].call( window, document );
}
```

--------------------------------

### Simplified :nth-child() Syntax (a=0)

Source: https://github.com/jquery/sizzle/blob/main/speed/data/selector.html

Demonstrates the simplified syntax for :nth-child() when 'a' is 0, effectively selecting the Nth child.

```css
foo:nth-child(0n+5)   /* represents an element foo that is the 5th child
of its parent element */
foo:nth-child(5)      /* same */
```

--------------------------------

### Language Selection Comparison (Attribute vs. :lang)

Source: https://github.com/jquery/sizzle/blob/main/speed/data/selector.html

Illustrates the difference between attribute-based selection ([lang|=fr]) and the :lang() pseudo-class, showing how :lang() uses document semantics.

```html
<body lang=fr>
<p>Je suis français.</p>
</body>
```

--------------------------------

### Combining Dynamic Pseudo-classes

Source: https://github.com/jquery/sizzle/blob/main/speed/data/selector.html

Demonstrates how to combine dynamic pseudo-classes like :focus and :hover to create more specific selectors. An element can match multiple pseudo-classes simultaneously.

```css
a:focus
			a:focus:hover
```

--------------------------------

### Universal Selector with Namespace (CSS)

Source: https://github.com/jquery/sizzle/blob/main/speed/data/selector.html

Illustrates matching all elements within a specific namespace or all elements universally using CSS syntax.

```css
ns|*
*|*
|*
*
```

--------------------------------

### Nested Block-level Elements and ::first-line

Source: https://github.com/jquery/sizzle/blob/main/speed/data/selector.html

Demonstrates the fictional tag sequence for ::first-line when nested within multiple block-level elements like DIV and P.

```html
<DIV>
				<P><DIV::first-line><P::first-line>First paragraph</P::first-line></DIV::first-line></P>
				<P><P::first-line>Second paragraph</P::first-line></P>
				</DIV>
```

--------------------------------

### Type Selectors with Namespaces (CSS)

Source: https://github.com/jquery/sizzle/blob/main/speed/data/selector.html

Demonstrates matching elements within specific namespaces using CSS @namespace rules.

```css
@namespace foo url(http://www.example.com);
			foo|h1 { color: blue }  /* first rule */
			foo|* { color: yellow } /* second rule */
			|h1 { color: red }      /* ...*/
			*|h1 { color: green }
			h1 { color: green }
```

--------------------------------

### Universal Selector Equivalents

Source: https://github.com/jquery/sizzle/blob/main/speed/data/selector.html

Shows how the universal selector '*' can be omitted in certain contexts when it's the only component or followed by a pseudo-element.

```css
*[hreflang|=en]
*.warning
*#myid
```

--------------------------------

### Select a, as the first child of any element

Source: https://github.com/jquery/sizzle/blob/main/speed/data/selector.html

Demonstrates selecting an 'a' tag that is the first child of any parent element. The selector '* > a:first-child' is generally equivalent to 'a:first-child'.

```css
* > a:first-child /* a is first child of any element */
```

```css
a:first-child /* Same (assuming a is not the root element) */
```

--------------------------------

### Selecting Elements by Language (Belgian French or German)

Source: https://github.com/jquery/sizzle/blob/main/speed/data/selector.html

Selects HTML documents or 'q' elements in Belgian French or German. The matching is case-insensitive and checks for exact or prefix matches.

```css
html:lang(fr-be)
html:lang(de)
:lang(fr-be) > q
:lang(de) > q
```

--------------------------------

### Attribute Selectors with Namespaces

Source: https://github.com/jquery/sizzle/blob/main/speed/data/selector.html

Demonstrates attribute selectors using CSS qualified names with namespace prefixes. Matches elements based on attributes within specific or any namespaces.

```css
@namespace foo "http://www.example.com";
			[foo|att=val] { color: blue }
```

```css
			[*|att] { color: yellow }
```

```css
			[|att] { color: green }
```

```css
			[att] { color: green }
```

--------------------------------

### Sizzle.selectors.pseudos

Source: https://github.com/jquery/sizzle/wiki/Home

Extends Sizzle by adding new pseudo-selectors (e.g., ':fixed'). Custom pseudo functions can be defined here.

```APIDOC
## Sizzle.selectors.pseudos.NAME( elem )

### Description
This is the most common extension to a selector engine: adding a new pseudo-selector. The name of the pseudo should be added as a property to this object, with its value being a function that accepts a DOM element. To add a new pseudo, define a function here with the name of the pseudo.

### Parameters
- **elem** (DOMElement) - The element to test against the pseudo-selector.

### Returns
- **Boolean**: `true` if the element matches the pseudo-selector, `false` otherwise.

### Example
```javascript
Sizzle.selectors.pseudos.fixed = function( elem ) {
    var $test = jQuery( document ); // Assuming jQuery is available for context
    $test[ 0 ] = elem;
    return $test.css( "position" ) === "fixed";
};
```
```

--------------------------------

### Select elements not in the default namespace

Source: https://github.com/jquery/sizzle/blob/main/speed/data/selector.html

Matches all elements that are not in the default namespace, assuming a default namespace is bound to 'http://example.com/'.

```css
*|*:not(*)
```

--------------------------------

### Simplified :nth-child() Syntax (b=0)

Source: https://github.com/jquery/sizzle/blob/main/speed/data/selector.html

Illustrates selecting every 'a'th element when b=0 in the :nth-child() expression.

```css
tr:nth-child(2n+0) /* represents every even row of an HTML table */
tr:nth-child(2n) /* same */
```

--------------------------------

### Simulated ::first-line with Nested Span

Source: https://github.com/jquery/sizzle/blob/main/speed/data/selector.html

Shows how the ::first-line pseudo-element's fictional tags can interact with nested elements like spans, simulating element closure and reopening.

```html
<P><P::first-line>**<SPAN class="test">** This is a
				somewhat long HTML
				paragraph that will **</SPAN>**</P::first-line>**<SPAN class="test">** be
				broken into several
				lines.**</SPAN>** The first line will be identified
				by a fictional tag sequence. The other lines
				will be treated as ordinary lines in the 
				paragraph.</P>
```

--------------------------------

### Simplified :nth-child() Syntax (a=1 or a=-1)

Source: https://github.com/jquery/sizzle/blob/main/speed/data/selector.html

Shows equivalent selectors for selecting all elements of a certain type when a=1 or a=-1 in :nth-child().

```css
bar:nth-child(1n+0)   /* represents all bar elements, specificity (0,1,1) */
bar:nth-child(n+0)    /* same */
bar:nth-child(n)      /* same */
bar                   /* same but lower specificity (0,0,1) */
```

--------------------------------

### Link Pseudo-classes: :link and :visited

Source: https://github.com/jquery/sizzle/blob/main/speed/data/selector.html

Use :link to select unvisited links and :visited to select links that have already been visited by the user. Note that user agents may implement privacy measures.

```css
a.external:visited
```

--------------------------------

### Condensing Identical Declarations in CSS

Source: https://github.com/jquery/sizzle/blob/main/speed/data/selector.html

Demonstrates how to combine multiple CSS rules with identical declarations into a single, more efficient rule. This applies when all selectors are valid.

```css
h1 {
  font-family: sans-serif
}
h2 {
  font-family: sans-serif
}
h3 {
  font-family: sans-serif
}
```

```css
h1, h2, h3 {
  font-family: sans-serif
}
```

--------------------------------

### Styling Target Elements

Source: https://github.com/jquery/sizzle/blob/main/speed/data/selector.html

Makes the target element red and places an image before it if one exists.

```css
*:target {
  color : red
}
*:target::before {
  content : url(target.png)
}
```

--------------------------------

### HTML Paragraph Structure for ::first-line

Source: https://github.com/jquery/sizzle/blob/main/speed/data/selector.html

Demonstrates a standard HTML paragraph that will be broken into multiple lines. The first line is conceptually identified by a fictional tag sequence for ::first-line.

```html
<P>This is a somewhat long HTML 
				paragraph that will be broken into several 
				lines. The first line will be identified
				by a fictional tag sequence. The other lines 
				will be treated as ordinary lines in the 
				paragraph.</P>
```

--------------------------------

### Alternating Paragraph Colors with :nth-child()

Source: https://github.com/jquery/sizzle/blob/main/speed/data/selector.html

Shows how to apply different colors to paragraphs based on their position using :nth-child() with a cycle of four.

```css
p:nth-child(4n+1) { color: navy; }
p:nth-child(4n+2) { color: green; }
p:nth-child(4n+3) { color: maroon; }
p:nth-child(4n+4) { color: purple; }
```

--------------------------------

### Using Sizzle.noConflict()

Source: https://github.com/jquery/sizzle/blob/main/test/data/noConflict.html

This snippet demonstrates how to use Sizzle.noConflict() to save the current Sizzle object and restore the previous one. It then verifies that the original Sizzle and the saved Sizzle objects behave as expected.

```javascript
var Sizzle1 = Sizzle;
var Sizzle2 = Sizzle;
var selector = "html > *";
var elem = document.documentElement.firstChild;
var expected = [];
var originalSizzle = Sizzle;

var sizzle1Selection = Sizzle1( selector );
var sizzle2Selection = Sizzle2( selector );

var replaced = Sizzle.noConflict();

do {
  if ( elem.nodeType === 1 ) {
    expected.push( elem );
  }
} while ( (elem = elem.nextSibling) );

window.parent.iframeCallback( function( assert ) {
  assert.notStrictEqual( originalSizzle, Sizzle1, "first Sizzle overwritten" );
  assert.deepEqual( sizzle1Selection, expected, "selection by first Sizzle" );
  assert.deepEqual( sizzle2Selection, expected, "selection by second Sizzle" );
  assert.strictEqual( Sizzle, Sizzle1, "first Sizzle restored by noConflict" );
  assert.strictEqual( replaced, Sizzle2, "second Sizzle returned by noConflict" );
  assert.deepEqual( Sizzle1( selector ), expected, "another selection by first Sizzle" );
  assert.deepEqual( Sizzle2( selector ), expected, "another selection by second Sizzle" );
} );
```

--------------------------------

### Selector Grammar: Universal Selector

Source: https://github.com/jquery/sizzle/blob/main/speed/data/selector.html

Defines the universal selector, which can optionally include a namespace prefix.

```css
universal
		: [ namespace_prefix ]? '*'
		;
```

--------------------------------

### Handling Default Attribute Values in DTDs

Source: https://github.com/jquery/sizzle/blob/main/speed/data/selector.html

Illustrates how attribute selectors interact with default attribute values defined in DTDs. Shows how to select elements with explicit values and how to handle default values.

```css
EXAMPLE[radix=decimal] { /*... default property settings ...*/ }
			EXAMPLE[radix=octal]   { /*... other settings...*/ }
```

```css
EXAMPLE                { /*... default property settings ...*/ }
			EXAMPLE[radix=octal]   { /*... other settings...*/ }
```

--------------------------------

### Selector Grammar: Negation Argument

Source: https://github.com/jquery/sizzle/blob/main/speed/data/selector.html

Defines the allowed types of simple selectors that can be arguments to the negation pseudo-class.

```css
negation_arg
		: type_selector | universal | HASH | class | attrib | pseudo
		;
```

--------------------------------

### Sizzle.selectors.attrHandle

Source: https://github.com/jquery/sizzle/wiki/Home

Handles attributes that require specialized processing, such as 'href'. Custom attribute handlers can be added.

```APIDOC
## Sizzle.selectors.attrHandle.LOWERCASE_NAME( elem, casePreservedName, isXML )

### Description
Handles an attribute which requires specialized processing (such as `href`, which has cross-browser issues). The name of the attribute should be lowercase. To add a new attribute handler, define a function here with the lowercase name of the attribute.

### Parameters
- **elem** (DOMElement) - The element to retrieve the attribute from.
- **casePreservedName** (String) - The original name of the attribute, preserving case.
- **isXML** (Boolean) - A boolean value indicating whether the function is currently operating within an XML document.

### Returns
- **String**: The actual string value of that attribute.
```

--------------------------------

### User Action Pseudo-classes: :hover, :active, :focus

Source: https://github.com/jquery/sizzle/blob/main/speed/data/selector.html

These pseudo-classes classify elements based on user interaction. :hover applies when a user designates an element with a pointing device, :active applies while an element is being activated, and :focus applies while an element has focus.

```css
a:link    /\* unvisited links \*/
			a:visited /\* visited links \*/
			a:hover   /\* user hovers \*/
			a:active  /\* active links \*/
```

--------------------------------

### Selector Grammar: Namespace Prefix

Source: https://github.com/jquery/sizzle/blob/main/speed/data/selector.html

Defines a namespace prefix, which can be an identifier, the universal selector character ('*'), followed by a pipe symbol.

```css
namespace_prefix
		: [ IDENT | '*' ]? '|'
		;
```

--------------------------------

### Sizzle Lexical Scanner (Flex Notation)

Source: https://github.com/jquery/sizzle/blob/main/speed/data/selector.html

This code defines the regular expressions and token definitions for the Sizzle tokenizer, written in Flex notation. It handles various CSS selector components, including identifiers, strings, numbers, and special characters. The tokenizer is case-insensitive.

```flex
%option case-insensitive
		ident     \[-\]\?{nmstart}{nmchar}\*
		name      {nmchar}\+
		nmstart   \[\_a-z\]|{nonascii}|{escape}
		nonascii  \[^\\0-\\177\]
		unicode   \\\\\[0-9a-f\]{1,6}(\\r\\n|\[ \n\r\t\f\])?
		escape    {unicode}|\\\\\[^\n\r\f0-9a-f\]
		nmchar    \[\_a-z0-9-\]|{nonascii}|{escape}
		num       \[0-9\]+|\n[0-9\*\\]*\.\[0-9\]+
		string    {string1}|{string2}
		string1   \"(\[^\n\r\f\\\"\\\]|\\{nl}|{nonascii}|{escape})\*\"
		string2   \\'(\[^\n\r\f\\\'\\\]|\\{nl}|{nonascii}|{escape})\*\\' 
		invalid   {invalid1}|{invalid2}
		invalid1  \"(\[^\n\r\f\\\"\\\]|\\{nl}|{nonascii}|{escape})\*
		invalid2  \\'(\[^\n\r\f\\\'\\\]|\\{nl}|{nonascii}|{escape})\*
		nl        \n|\r\n|\r|\f
		w         \[ \t\r\n\f\]*

		D         d|\\0{0,4}(44|64)(\\r\\n|\[ \t\r\n\f\])?
		E         e|\\0{0,4}(45|65)(\\r\\n|\[ \t\r\n\f\])?
		N         n|\\0{0,4}(4e|6e)(\\r\\n|\[ \t\r\n\f\])?|\\n
		O         o|\\0{0,4}(4f|6f)(\\r\\n|\[ \t\r\n\f\])?|\\o
		T         t|\\0{0,4}(54|74)(\\r\\n|\[ \t\r\n\f\])?|\\t
		V         v|\\0{0,4}(58|78)(\\r\\n|\[ \t\r\n\f\])?|\\v

		%%

		\[ \t\r\n\f\]+     return S;

		"~="             return INCLUDES;
		"|="             return DASHMATCH;
		"^="             return PREFIXMATCH;
		"$="             return SUFFIXMATCH;
		"*="             return SUBSTRINGMATCH;
		{ident}          return IDENT;
		{string}         return STRING;
		{ident}"("       return FUNCTION;
		{num}            return NUMBER;
		"#"{name}        return HASH;
		{w}"+"           return PLUS;
		{w}">"           return GREATER;
		{w}","           return COMMA;
		{w}"~"           return TILDE;
		":"{N}{O}{T}"("  return NOT;
		"@"{ident}         return ATKEYWORD;
		{invalid}        return INVALID;
		{num}"%"           return PERCENTAGE;
		{num}{ident}     return DIMENSION;
		"<!--"           return CDO;
		"-->"            return CDC;

		\/\*[^\*]*\*+(\([^/\*]\*+\))*\/                    /\* ignore comments \*/

		.                return *yytext;
	
```

--------------------------------

### Styling the First Letter of a Paragraph

Source: https://github.com/jquery/sizzle/blob/main/speed/data/selector.html

Applies a larger font size and normal font weight to the first letter of a paragraph. This is useful for creating initial caps or drop caps.

```css
p {
	line-height: 1.1
}
p::first-letter {
	font-size: 3em;
	font-weight: normal
}
```

--------------------------------

### :nth-child() with Negative 'a' Value

Source: https://github.com/jquery/sizzle/blob/main/speed/data/selector.html

Demonstrates selecting the first N elements of a table using a negative 'a' value in :nth-child().

```css
html|tr:nth-child(-n+6)  /* represents the 6 first rows of XHTML tables */
```

--------------------------------

### Sizzle.selectors.preFilter

Source: https://github.com/jquery/sizzle/wiki/Home

Optional pre-filter functions to clean up matched arrays before they are passed to filter functions. Custom pre-filters can be added.

```APIDOC
## Sizzle.selectors.preFilter.NAME( match )

### Description
An optional pre-filter function which allows filtering of the matched array against the corresponding regular expression. This function returns a new matched array, which will eventually be passed and flattened as arguments against the corresponding filter function. This is intended to clean up some of the repetitive processing that occurs in a filter function. To add a new pre-filter, a regular expression must be added to `Sizzle.selectors.match` and the function defined here.

### Parameters
- **match** (Array) - The array of results returned from matching the specified regex against the selector.

### Returns
- **Array**: A new, potentially cleaned, matched array.
```

--------------------------------

### Sizzle.selectors.find

Source: https://github.com/jquery/sizzle/wiki/Home

Methods for finding elements on a page based on parsed selector parts. Custom find functions can be added.

```APIDOC
## Sizzle.selectors.find.NAME( match, context, isXML )

### Description
A method for finding some elements on a page. The specified function will be called no more than once per selector. To add a new find function, a regular expression must be added to `Sizzle.selectors.match`, and the function defined here. Additionally, `"|" + NAME` must be appended to the `Sizzle.selectors.order` regex.

### Parameters
- **match** (Array) - The array of results returned from matching the specified regex against the selector.
- **context** (DOMElement or DOMDocument) - The DOMElement or DOMDocument from which selection will occur.
- **isXML** (Boolean) - A boolean value indicating whether the function is currently operating within an XML document.

### Returns
(Implicitly returns found elements, typically an array or similar collection).
```

--------------------------------

### Target Element Selector

Source: https://github.com/jquery/sizzle/blob/main/speed/data/selector.html

Represents a 'p' element with the class 'note' that is the target element of the referring URI.

```css
p.note:target
```

--------------------------------

### Select a with exact href value

Source: https://github.com/jquery/sizzle/blob/main/speed/data/selector.html

Matches an 'a' element where the 'href' attribute's value is exactly 'http://www.w3.org/'.

```css
a[href="http://www.w3.org/"]
```

--------------------------------

### Select p with title containing 'hello'

Source: https://github.com/jquery/sizzle/blob/main/speed/data/selector.html

Matches a 'p' element where the 'title' attribute's value contains the substring 'hello'.

```css
p[title*="hello"]
```

--------------------------------

### Sizzle.selectors.match

Source: https://github.com/jquery/sizzle/wiki/Home

Contains regular expressions used to parse selectors into parts for finding and filtering. Custom regular expressions can be added here.

```APIDOC
## Sizzle.selectors.match.NAME = RegExp

### Description
This object contains the regular expressions used to parse a selector into different parts, which are then used for finding and filtering elements. The name of each regular expression should correspond to the names specified in the `Sizzle.selectors.find` and `Sizzle.selectors.filter` objects. Users can extend Sizzle by adding new regular expressions here.

### Usage
`Sizzle.selectors.match.NAME = /your_regex_here/;
```

--------------------------------

### Select all elements except FOO

Source: https://github.com/jquery/sizzle/blob/main/speed/data/selector.html

Matches any element that is not of type FOO.

```css
*:not(FOO)
```

--------------------------------

### Select all elements except links

Source: https://github.com/jquery/sizzle/blob/main/speed/data/selector.html

Matches all HTML elements that are neither links nor visited links.

```css
html*:not(:link):not(:visited)
```

--------------------------------

### Select h1 with title attribute

Source: https://github.com/jquery/sizzle/blob/main/speed/data/selector.html

Matches an h1 element that has a title attribute, regardless of its value.

```css
h1[title]
```

--------------------------------

### CSS Class Selector (Universal)

Source: https://github.com/jquery/sizzle/blob/main/speed/data/selector.html

Applies styles to all elements with a class attribute matching the specified value. This is a shorthand for the attribute selector.

```css
\*.pastoral { color: green }  /\* all elements with class~=pastoral \*/
```

```css
.pastoral { color: green }  /\* all elements with class~=pastoral \*/
```

--------------------------------

### Select DIALOGUE with character attribute

Source: https://github.com/jquery/sizzle/blob/main/speed/data/selector.html

Matches a DIALOGUE element where the 'character' attribute is exactly 'romeo' or 'juliet'.

```css
DIALOGUE[character=romeo]
```

```css
DIALOGUE[character=juliet]
```

--------------------------------

### Select a with rel attribute containing 'copyright'

Source: https://github.com/jquery/sizzle/blob/main/speed/data/selector.html

Matches an 'a' element where the 'rel' attribute's value is a whitespace-separated list containing the word 'copyright'.

```css
a[rel~="copyright"]
```

--------------------------------

### Selector Grammar: Negation

Source: https://github.com/jquery/sizzle/blob/main/speed/data/selector.html

Defines the negation pseudo-class (:not()), which takes an argument that is a simple selector.

```css
negation
		: NOT S* negation_arg S* ')'
		;
```

--------------------------------

### Selector Grammar: Combinator

Source: https://github.com/jquery/sizzle/blob/main/speed/data/selector.html

Defines the possible combinators used in selectors, including space (descendant), plus (child), greater than (adjacent sibling), and tilde (general sibling). Whitespace around combinators is allowed.

```css
combinator
		/* combinators can be surrounded by whitespace */
		: PLUS S* | GREATER S* | TILDE S* | S+
```

--------------------------------

### Select a with exact hreflang value

Source: https://github.com/jquery/sizzle/blob/main/speed/data/selector.html

Matches an 'a' element where the 'hreflang' attribute's value is exactly 'fr'.

```css
a[hreflang=fr]
```

--------------------------------

### :nth-of-type() for Alternating Floats

Source: https://github.com/jquery/sizzle/blob/main/speed/data/selector.html

Illustrates alternating the float direction of images based on their type and position using :nth-of-type().

```css
img:nth-of-type(2n+1) { float: right; }
img:nth-of-type(2n) { float: left; }
```

--------------------------------

### Selector Grammar: Type Selector

Source: https://github.com/jquery/sizzle/blob/main/speed/data/selector.html

Defines a type selector, which consists of an optional namespace prefix followed by an element name.

```css
type_selector
		: [ namespace_prefix ]? element_name
		;
```

--------------------------------

### Sizzle Public API

Source: https://github.com/jquery/sizzle/wiki/Home

The primary function for finding elements using CSS selectors. It leverages `querySelectorAll` when available and returns an array of matching DOM nodes.

```APIDOC
## Sizzle( String selector[, DOMNode context[, Array results]] )

### Description
The main function for finding elements. Uses `querySelectorAll` if available.

### Method
(Implicitly a function call)

### Parameters
#### Path Parameters
(Not applicable)

#### Query Parameters
(Not applicable)

#### Request Body
(Not applicable)

### Parameters
- **selector** (String) - Required - A CSS selector.
- **context** (DOMNode) - Optional - An element, document, or document fragment to use as the context for finding elements. Defaults to `document`. Prior to version 2.1, document fragments were not valid here.
- **results** (Array) - Optional - An array or an array-like object, to which Sizzle will append results. For example, jQuery passes a jQuery collection. An "array-like object" is an object with a nonnegative numeric `length` property and a `push` method.

### Returns
(Array): All elements matching the selector
```

--------------------------------

### Selector Grammar: Selector

Source: https://github.com/jquery/sizzle/blob/main/speed/data/selector.html

Defines a selector as a sequence of simple selectors, potentially combined with combinators.

```css
selector
		: simple_selector_sequence [ combinator simple_selector_sequence ]*
		;
```

--------------------------------

### CSS for ::first-letter and ::first-line

Source: https://github.com/jquery/sizzle/blob/main/speed/data/selector.html

This CSS defines styles for the ::first-letter and ::first-line pseudo-elements on paragraph elements. It sets a base color and font size for paragraphs, a larger font size and green color for the first letter, and a blue color for the rest of the first line.

```css
p {
 color: red;
 font-size: 12pt
}

p::first-letter {
 color: green;
 font-size: 200%
}

p::first-line {
 color: blue
}
```

--------------------------------

### Select non-disabled buttons

Source: https://github.com/jquery/sizzle/blob/main/speed/data/selector.html

Matches all button elements that do not have the 'disabled' attribute.

```css
button:not([DISABLED])
```

--------------------------------

### Selector Grammar: Element Name

Source: https://github.com/jquery/sizzle/blob/main/speed/data/selector.html

Defines an element name as an identifier.

```css
element_name
		: IDENT
		;
```

--------------------------------

### Select a with href ending with '.html'

Source: https://github.com/jquery/sizzle/blob/main/speed/data/selector.html

Matches an 'a' element where the 'href' attribute's value ends with '.html'.

```css
a[href$=".html"]
```

--------------------------------

### Sizzle.matches

Source: https://github.com/jquery/sizzle/wiki/Home

Filters an array of DOM elements, returning only those that match a given CSS selector.

```APIDOC
## Sizzle.matches( String selector, Array<DOMElement> elements )

### Description
Filters an array of DOM elements, returning only those that match the provided CSS selector.

### Method
`Sizzle.matches`

### Parameters
#### Path Parameters
- **selector** (String) - Required - A CSS selector.
- **elements** (Array<DOMElement>) - Required - An array of DOMElements to filter against the specified selector.

### Returns
- **Array**: Elements in the array that match the given selector.
```

--------------------------------

### Sizzle.selectors.filter

Source: https://github.com/jquery/sizzle/wiki/Home

Functions to filter elements based on selector parts. Custom filter functions can be added.

```APIDOC
## Sizzle.selectors.filter.NAME( element, match[1][, match[2], match[3], ...] )

### Description
The main function for filtering elements based on a parsed selector part. To add a new filter, a regular expression must be added to `Sizzle.selectors.match`, and the function defined here. A function may optionally be added to `Sizzle.selectors.preFilter`. Note that `match[0]` will be deleted prior to being passed to a filter and must not be used.

### Parameters
- **element** (DOMElement) - The current element being processed.
- **match[1]...match[n]** (any) - Captures from the regex corresponding to this filter, starting at index 1.

### Returns
- **Boolean**: `true` if the element matches the selector, `false` otherwise.
```

--------------------------------

### Descendant Combinator with Universal Selector

Source: https://github.com/jquery/sizzle/blob/main/speed/data/selector.html

Selects a `p` element that is a descendant of a `div` element, with any element in between.

```css
div * p
```

--------------------------------

### Combined Descendant and Child Combinators

Source: https://github.com/jquery/sizzle/blob/main/speed/data/selector.html

Selects a `p` element that is a descendant of an `li`, where the `li` is a direct child of an `ol`, and the `ol` is a descendant of a `div`.

```css
div ol>li p
```