recursal/MDN huggingface dataset:
set:difference()
================

**XSLT/XPath Reference**: XSLT elements, EXSLT functions, XPath functions, XPath axes

`set:difference()` returns the difference between two node-sets. In other words, it returns a node-set whose nodes are in one node-set but not in the other.

The template version of `set:difference` applies templates to these nodes in `set:difference` mode, copying the nodes so that a result tree fragment consisting of the nodes is returned.

Syntax
------
```

set:difference(nodeSet1, nodeSet2)
```

### Parameters

`nodeSet1`

The node-set from which to subtract nodes.

`nodeSet2`

The set of nodes to subtract from `nodeSet1`.

### Returns

A node-set containing the nodes that are in `nodeSet1` but not in `nodeSet2`.

Specifications
--------------

EXSLT - SET:DIFFERENCE
set:has-same-node()
===================

**XSLT/XPath Reference**: XSLT elements, EXSLT functions, XPath functions, XPath axes

`set:has-same-node()` determines whether two node-sets have any nodes in common.

Syntax
------
```

set:has-same-node(nodeSet1, nodeSet2)
```

### Parameters

`nodeSet1`

The first node set to check.

`nodeSet2`

The second node set to check.

### Returns

`true` if the two node-sets have any nodes in common; otherwise `false`.

Specifications
--------------

EXSLT - SET:HAS-SAME-NODE
regexp:match()
==============

**XSLT/XPath Reference**: XSLT elements, EXSLT functions, XPath functions, XPath axes

`regexp:match()` performs regular expression matching on a string, returning the submatches found as a result.

Syntax
------


```js
regexp:match(targetString, regExpString[, flagsString])
```

### Parameters

`targetString`

The string to perform regular expression matching upon.

`regExpString`

The JavaScript style regular expression to evaluate.

`flagsString` Optional

An optional string containing character flags.

The character flags are:

`g`

Global match. The submatches from every match in the string are returned. If this flag isn't specified, only the submatches from the first match are returned.

`i`

Case insensitive match. If this flag is specified, the match is performed in a case insensitive fashion.

### Returns

A node set of `match` elements, each of which has the string value equal to a portion of the first parameter string as captured by the regular expression. If the match isn't a global one, the first match element has the value of the portion of the string matched by the entire regular expression.

For example:


```xml
<xsl:for-each select="regExp:match('https://developer.mozilla.org/en/docs/Firefox\_3\_for\_developers',
 '(\w+):\/\/([^/:]+)(:\d\*)?([^# ]\*)')">
   Part <xsl:value-of select="position()" /> = <xsl:value-of select="." />
</xsl:for-each>
```


This code generates the following output:
```

Part 1 = https://developer.mozilla.org/en/docs/Firefox_3_for_developers
Part 2 = https
Part 3 = developer.mozilla.org
Part 4 =
Part 5 = /en/docs/Firefox_3_for_developers
```

Specifications
--------------

EXSLT - REGEXP:MATCH
regexp:replace()
================

**XSLT/XPath Reference**: XSLT elements, EXSLT functions, XPath functions, XPath axes

`regexp:replace()` replaces the portions of a string that match a given regular expression with the contents of another string.

Syntax
------
```

regexp:replace(originalString, regExpString, flagsString, replaceString)
```

### Parameters

`originalString`

The string perform a search-and-replace operation upon.

`regExpString`

The JavaScript style regular expression to evaluate.

`flagsString`

The string containing character flags.

`replaceString`

The string with which the matched substrings are to be replaced.

The character flags are:

`g` - Global replace

If this flag is specified, all occurrences of the regular expression within the `originalString` are replaced. Otherwise only the first occurrence is replaced.

`i` - Case insensitive match

If this flag is specified, the match is performed in a case insensitive fashion.

### Returns

The revised version of the string.

Specifications
--------------

EXSLT - REGEXP:REPLACE
regexp:test()
=============

**XSLT/XPath Reference**: XSLT elements, EXSLT functions, XPath functions, XPath axes

`regexp:test()` tests to see whether a string matches a specified regular expression.

Syntax
------


```js
regexp:test(testString, regExpString[, flagsString])
```

### Parameters

`testString`

The string to test.

`regExpString`

The JavaScript style regular expression to evaluate.

`flagsString` Optional

An optional string containing character flags.

The character flags are:

`g`

Global match. Has no effect for this function; it's allowed for consistency with other regexp functions.

`i`

Case insensitive match<. If this flag is specified, the match is performed in a case insensitive fashion.

### Returns

`true` if the specified regexp matches the test string.

Specifications
--------------

EXSLT - REGEXP:TEST
exsl:node-set()
===============

**XSLT/XPath Reference**: XSLT elements, EXSLT functions, XPath functions, XPath axes

`exsl:node-set()` returns a node-set from a result tree fragment, which is what you get when you look at the `xsl:variable` instead of its select attribute to fetch a variable's value. This lets you process the XML created within a variable to process it in multiple steps.

You can also use `exsl:node-set()` to turn strings into text nodes.

Syntax
------
```

exsl:node-set(object)
```

### Parameters

`object`

The object for which to return the corresponding node-set.

### Returns

The node-set corresponding to the specified `object`.

Specifications
--------------

EXSLT - EXSL:NODE-SET
exsl:object-type()
==================

**XSLT/XPath Reference**: XSLT elements, EXSLT functions, XPath functions, XPath axes

`exsl:object-type()` returns a string that indicates the type of the specified object.

**Note:** Most XSLT object types can be coerced into each other safely; however, certain coercions to raise error conditions. In particular, treating something that's not a node-set as a node-set will do so. This function lets authors of named templates and extension functions easily provide flexibility in parameter values.

Syntax
------
```

exsl:object-type(object)
```

### Parameters

`object`

The object whose type is to be returned.

### Returns

The object's type, which will be one of the following:

* `string`
* `number`
* `boolean`
* `node-set`
* `RTF`
* `external`
Specifications
--------------

EXSLT - EXSL:OBJECT-TYPE
str:concat()
============

**XSLT/XPath Reference**: XSLT elements, EXSLT functions, XPath functions, XPath axes

`str:concat()` returns a string containing all the string values in a node-set concatenated together.

Syntax
------
```

str:concat(nodeSet)
```

### Parameters

`nodeSet`

The node-set whose nodes' string values should be concatenated into one string.

### Returns

A string whose value is all the string values of the nodes in `nodeSet` concatenated together. If `nodeSet` is empty, an empty string is returned.

Specifications
--------------

EXSLT - STR:CONCAT
str:tokenize()
==============

**XSLT/XPath Reference**: XSLT elements, EXSLT functions, XPath functions, XPath axes

`str:tokenize()` splits a string using a set of characters as delimiters that determine where the splits should occur, returning a node-set containing the resulting strings.

Syntax
------
```

str:tokenize(string, delimiters)
```

### Parameters

`string`

The string to tokenize.

`delimiters`

Each character in this string is used as a word separator while tokenizing.

### Returns

A node-set of `token` elements, each containing one token from the `string`.

Example
-------
```

str:tokenize('2007-09-14-03T11:40:23', '-T:')
```


Returns a node set like this:


```xml
<token>2007</token>
<token>09</token>
<token>14</token>
<token>11</token>
<token>40</token>
<token>23</token>
```

Specifications
--------------

EXSLT - STR:TOKENIZE

See also
--------

* `str:split()`
str:split()
===========

**XSLT/XPath Reference**: XSLT elements, EXSLT functions, XPath functions, XPath axes

`str:split()` splits a string using a pattern string to determine where the splits should occur, returning a node-set containing the resulting strings.

Syntax
------
```

str:split(string, pattern)
```

### Parameters

`string`

The string to split.

`pattern`

The pattern indicating where to split the string.

### Returns

A node-set of `token` elements, each containing one token from the `string`.

Example
-------
```

str:split('book, phone, computer, chair', ', ')
```


Returns a node set like:


```xml
<token>book</token>
<token>phone</token>
<token>computer</token>
<token>chair</token>
```

Specifications
--------------

EXSLT - STR:SPLIT

See also
--------

* `str:tokenize()`
math:max()
==========

**XSLT/XPath Reference**: XSLT elements, EXSLT functions, XPath functions, XPath axes

`math:max()` returns the maximum value of a node-set.

To compute the maximum value of the node-set, the node set is sorted into descending order as it would be using `xsl:sort()` with a data type of `number`. The maximum value is then the first node in the sorted list, converted into a number.

Syntax
------
```

math:max(nodeSet)
```

### Parameters

`nodeSet`

The node-set whose highest value is to be returned.

### Returns

A result tree fragment representing the highest valued node's numeric value as a string.

Specifications
--------------

EXSLT - MATH:MAX
math:min()
==========

**XSLT/XPath Reference**: XSLT elements, EXSLT functions, XPath functions, XPath axes

`math:min()` returns the minimum value of a node-set.

To compute the minimum value of the node-set, the node set is sorted into ascending order as it would be using `xsl:sort()` with a data type of `number`. The minimum value is then the first node in the sorted list, converted into a number.

Syntax
------
```

math:min(nodeSet)
```

### Parameters

`nodeSet`

The node-set whose lowest value is to be returned.

### Returns

A result tree fragment representing the lowest valued node's numeric value as a string.

Specifications
--------------

EXSLT - MATH:MIN
math:lowest()
=============

**XSLT/XPath Reference**: XSLT elements, EXSLT functions, XPath functions, XPath axes

`math:lowest()` returns the node in the specified node-set with the lowest value (where the lowest value calculated using `math:min()`).

A node has this minimum value if converting its string value to a number equals the minimum value.

Syntax
------
```

math:lowest(nodeSet)
```

### Parameters

`nodeSet`

The node-set whose lowest value is to be returned.

### Returns

A result tree fragment consisting of copies of the nodes returned by `math:min()`.

Specifications
--------------

EXSLT - MATH:LOWEST
math:highest()
==============

**XSLT/XPath Reference**: XSLT elements, EXSLT functions, XPath functions, XPath axes

`math:highest()` returns the node in the specified node-set with the highest value (where the highest value calculated using `math:max()`).

A node has this maximum value if converting its string value to a number equals the maximum value.

Syntax
------
```

math:highest(nodeSet)
```

### Parameters

`nodeSet`

The node-set whose highest value is to be returned.

### Returns

A result tree fragment consisting of copies of the nodes returned by `math:max()`.

Specifications
--------------

EXSLT - MATH:HIGHEST
transition-property
===================

The **`transition-property`** CSS property sets the CSS properties to which a transition effect should be applied.

Try it
------

If you specify a shorthand property (e.g., `background`), all of its longhand sub-properties that can be animated will be.

Syntax
------


```css
/\* Keyword values \*/
transition-property: none;
transition-property: all;

/\* <custom-ident> values \*/
transition-property: test_05;
transition-property: -specific;
transition-property: sliding-vertically;

/\* Multiple values \*/
transition-property: test1, animation4;
transition-property: all, height, color;
transition-property:
  all,
  -moz-specific,
  sliding;

/\* Global values \*/
transition-property: inherit;
transition-property: initial;
transition-property: revert;
transition-property: revert-layer;
transition-property: unset;
```

### Values

`none`

No properties will transition.

`all`

All properties that can transition will.

`<custom-ident>`

A string identifying the property to which a transition effect should be applied when its value changes.

Formal definition
-----------------

|  |  |
| --- | --- |
| Initial value | all |
| Applies to | all elements, `::before` and `::after` pseudo-elements |
| Inherited | no |
| Computed value | as specified |
| Animation type | Not animatable |

Formal syntax
-------------
```

transition-property =   
  none                           |  
  <single-transition-property>#    
  
<single-transition-property> =   
  all             |  
  <custom-ident>    
  
```

Examples
--------

### Basic example

When the button is hovered or focused, it undergoes a one-second color transition; the `transition-property` is `background-color`.

#### HTML


```html
<button class="target">Focus me!</button>
```


#### CSS
```

html {
  height: 100vh;
}

button {
  font-size: 1.4rem;
  padding: 10px 20px;
  border: 1px solid #ccc;
  border-radius: 10px;
  outline: none;
}
```



```css
.target {
  transition-property: background-color;
  transition-duration: 1s;
  background-color: #ccc;
}

.target:hover,
.target:focus {
  background-color: #eee;
}
```


See our Using CSS transitions guide for more `transition-property` examples.

Specifications
--------------

| Specification |
| --- |
| CSS Transitions # transition-property-property |

Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

See also
--------

* Using CSS transitions
* `transition`
* `transition-duration`
* `transition-timing-function`
* `transition-delay`
* `TransitionEvent`
CSS nesting
===========

The **CSS nesting** module defines a syntax for nesting selectors, providing the ability to nest one style rule inside another, with the selector of the child rule relative to the selector of the parent rule.

CSS nesting is different from CSS preprocessors such as Sass in that it is parsed by the browser rather than being pre-compiled by a CSS preprocessor.

CSS nesting helps with the readability, modularity, and maintainability of CSS stylesheets. It also potentially helps reduce the size of CSS files, thereby decreasing the amount of data downloaded by users.

Reference
---------

### Selectors

* `&` nesting selector
Guides
------

Using CSS nesting

Explains how to use CSS nesting.

CSS nesting at-rules

Explains how to nest at-rules.

CSS nesting and specificity

Explains the differences in specificity when nesting CSS.

Related concepts
----------------

* Selectors and combinators
* Pseudo-classes
* CSS preprocessor
Specifications
--------------

| Specification |
| --- |
| CSS Nesting Module  |

See also
--------

* Specificity
* CSS cascade and inheritance module
* CSS selectors module
border-block-start-color
========================

The **`border-block-start-color`** CSS property defines the color of the logical block-start border of an element, which maps to a physical border color depending on the element's writing mode, directionality, and text orientation. It corresponds to the `border-top-color`, `border-right-color`, `border-bottom-color`, or `border-left-color` property depending on the values defined for `writing-mode`, `direction`, and `text-orientation`.

Try it
------

Syntax
------


```css
border-block-start-color: blue;
border-block-start-color: #4c5d21;

/\* Global values \*/
border-block-start-color: inherit;
border-block-start-color: initial;
border-block-start-color: revert;
border-block-start-color: revert-layer;
border-block-start-color: unset;
```


Related properties are `border-block-end-color`, `border-inline-start-color`, and `border-inline-end-color`, which define the other border colors of the element.

### Values

`<color>`

The color of the border.

Formal definition
-----------------

|  |  |
| --- | --- |
| Initial value | `currentcolor` |
| Applies to | all elements |
| Inherited | no |
| Computed value | computed color |
| Animation type | by computed value type |

Formal syntax
-------------
```

border-block-start-color =   
  <color>     |  
  <image-1D>    
  
<image-1D> =   
  <stripes()>    
  
<stripes()> =   
  stripes( <color-stripe># )    
  
<color-stripe> =   
  <color>                            &&  
  [ <length-percentage> | <flex> ]?    
  
<length-percentage> =   
  <length>      |  
  <percentage>    
  
```

Examples
--------

### Border color with vertical text

#### HTML


```html
<div>
  <p class="exampleText">Example text</p>
</div>
```


#### CSS


```css
div {
  background-color: yellow;
  width: 120px;
  height: 120px;
}

.exampleText {
  writing-mode: vertical-lr;
  border: 10px solid blue;
  border-block-start-color: red;
}
```


#### Results

Specifications
--------------

| Specification |
| --- |
| CSS Logical Properties and Values Level 1 # border-color |

Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

See also
--------

* CSS Logical Properties and Values
* This property maps to one of the physical border properties: `border-top-color`, `border-right-color`, `border-bottom-color`, or `border-left-color`.
* `writing-mode`, `direction`, `text-orientation`
:placeholder-shown
==================

The **`:placeholder-shown`** CSS pseudo-class represents any `<input>` or `<textarea>` element that is currently displaying placeholder text.

Try it
------

Syntax
------


```css
:placeholder-shown {
  /\* ... \*/
}
```

Examples
--------

### Basic example

This example applies special font and border styles when the placeholder is shown.

#### HTML


```html
<input placeholder="Type something here!" />
```


#### CSS


```css
input {
  border: 1px solid black;
  padding: 3px;
}

input:placeholder-shown {
  border-color: teal;
  color: purple;
  font-style: italic;
}
```


#### Result

### Overflowing text

When form fields are too small, placeholder text can get cropped in an undesirable way. You can use the `text-overflow` property to alter the way overflowing text is displayed.

#### HTML


```html
<input id="input1" placeholder="Name, Rank, and Serial Number" /> <br /><br />
<input id="input2" placeholder="Name, Rank, and Serial Number" />
```


#### CSS


```css
#input2:placeholder-shown {
  text-overflow: ellipsis;
}
```


#### Result

### Customized input field

The following example highlights the Student ID field with a custom style.

#### HTML


```html
<form id="test">
  <p>
    <label for="name">Enter Student Name:</label>
    <input id="name" placeholder="Student Name" />
  </p>
  <p>
    <label for="branch">Enter Student Branch:</label>
    <input id="branch" placeholder="Student Branch" />
  </p>
  <p>
    <label for="sid">Enter Student ID:</label>
    <input
 type="number"
 pattern="[0-9]{8}"
 title="8 digit ID"
 id="sid"
 class="studentid"
 placeholder="8 digit id" />
  </p>
  <input type="submit" />
</form>
```


#### CSS


```css
input {
  background-color: #e8e8e8;
  color: black;
}

input.studentid:placeholder-shown {
  background-color: yellow;
  color: red;
  font-style: italic;
}
```


#### Result

Specifications
--------------

| Specification |
| --- |
| Selectors Level 4 # placeholder |

Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

See also
--------

* The `::placeholder` pseudo-element styles the placeholder *itself*.
* Related HTML elements: `<input>`, `<textarea>`
* HTML forms
:-moz-handler-crashed
=====================

**Non-standard:** This feature is non-standard and is not on a standards track. Do not use it on production sites facing the Web: it will not work for every user. There may also be large incompatibilities between implementations and the behavior may change in the future.

The **`:-moz-handler-crashed`** CSS pseudo-class is a Mozilla extension that matches elements that can't be displayed because the plugin responsible for drawing them has crashed.

**Note:** This selector is mainly intended to be used by theme developers.

Syntax
------


```css
:-moz-handler-crashed {
  /\* ... \*/
}
```

Specifications
--------------

Not part of any standard.

See also
--------

* `:-moz-handler-blocked`
* `:-moz-handler-disabled`
background-blend-mode
=====================

The **`background-blend-mode`** CSS property sets how an element's background images should blend with each other and with the element's background color.

Try it
------

Blending modes should be defined in the same order as the `background-image` property. If the blending modes' and background images' list lengths are not equal, it will be repeated and/or truncated until lengths match.

Syntax
------


```css
/\* One value \*/
background-blend-mode: normal;

/\* Two values, one per background \*/
background-blend-mode: darken, luminosity;

/\* Global values \*/
background-blend-mode: inherit;
background-blend-mode: initial;
background-blend-mode: revert;
background-blend-mode: revert-layer;
background-blend-mode: unset;
```

### Values

`<blend-mode>`

The blending mode to be applied. There can be several values, separated by commas.

Formal definition
-----------------

|  |  |
| --- | --- |
| Initial value | `normal` |
| Applies to | All elements. In SVG, it applies to container elements, graphics elements, and graphics referencing elements.. It also applies to `::first-letter` and `::first-line`. |
| Inherited | no |
| Computed value | as specified |
| Animation type | Not animatable |

Formal syntax
-------------
```

background-blend-mode =   
  <mix-blend-mode>#    
  
```

Examples
--------

### Basic example


```css
.item {
  width: 300px;
  height: 300px;
  background: url("image1.png"), url("image2.png");
  background-blend-mode: screen;
}
```

### Try out different blend modes
```

<div id="div"></div>
<select id="select">
  <option>normal</option>
  <option>multiply</option>
  <option selected>screen</option>
  <option>overlay</option>
  <option>darken</option>
  <option>lighten</option>
  <option>color-dodge</option>
  <option>color-burn</option>
  <option>hard-light</option>
  <option>soft-light</option>
  <option>difference</option>
  <option>exclusion</option>
  <option>hue</option>
  <option>saturation</option>
  <option>color</option>
  <option>luminosity</option>
</select>
```


```
#div {
  width: 300px;
  height: 300px;
  background: url("br.png"), url("tr.png");
  background-blend-mode: screen;
}
```


```
document.getElementById("select").onchange = (event) => {
  document.getElementById("div").style.backgroundBlendMode =
    document.getElementById("select").selectedOptions[0].innerHTML;
};
console.log(document.getElementById("div"));
```

Specifications
--------------

| Specification |
| --- |
| Compositing and Blending Level 2 # background-blend-mode |

Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

See also
--------

* `<blend-mode>`
* `mix-blend-mode`