recursal/MDN huggingface dataset:
:last-child
===========

The **`:last-child`** CSS pseudo-class represents the last element among a group of sibling elements.

Try it
------

Syntax
------


```css
:last-child {
  /\* ... \*/
}
```

Examples
--------

### Basic example

#### HTML


```html
<div>
  <p>This text isn't selected.</p>
  <p>This text is selected!</p>
</div>

<div>
  <p>This text isn't selected.</p>
  <h2>This text isn't selected: it's not a `p`.</h2>
</div>
```


#### CSS


```css
p:last-child {
  color: lime;
  background-color: black;
  padding: 5px;
}
```


#### Result

### Styling a list

#### HTML


```html
<ul>
  <li>Item 1</li>
  <li>Item 2</li>
  <li>
    Item 3
    <ul>
      <li>Item 3.1</li>
      <li>Item 3.2</li>
      <li>Item 3.3</li>
    </ul>
  </li>
</ul>
```


#### CSS


```css
ul li {
  color: blue;
}

ul li:last-child {
  border: 1px solid red;
  color: red;
}
```


#### Result

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

| Specification |
| --- |
| Selectors Level 4 # the-last-child-pseudo |

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

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

See also
--------

* `:-moz-last-node` 
Non-standard
* `:last-of-type`
* `:first-child`
* `:nth-child`
::-webkit-meter-optimum-value
=============================

**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 **`::-webkit-meter-optimum-value`** CSS pseudo-element styles the `<meter>` element when its value is inside the low-high range, or when the value is equivalent to the optimum value.

Green is the default color.

Syntax
------


```css
::-webkit-meter-optimum-value {
  /\* ... \*/
}
```

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

Not part of any standard.

Examples
--------

This example will only work in browsers based on WebKit or Blink.

### HTML


```html
Normal:
<meter min="0" max="10" low="3" high="7" optimum="6" value="6">
  Score 6/10
</meter>
<br />
Styled:
<meter id="styled" min="0" max="10" low="3" high="7" optimum="6" value="6">
  Score 6/10
</meter>
```

### CSS


```css
body {
  font-family: monospace;
}

.safari meter {
  /\* Reset the default appearance for Safari only \*/
  /\* .safari class is added via JavaScript \*/
  -webkit-appearance: none;
}

#styled::-webkit-meter-optimum-value {
  background: linear-gradient(to bottom, #7f7, #090 45%, #090 55%, #7f7);
  height: 100%;
  box-sizing: border-box;
}
```

### JavaScript


```js
// Safari requires <meter> elements to have an `appearance` of `none` for custom styling
// using `::-webkit-meter-\*` selectors, but `appearance: none` breaks rendering on Chrome.
// Therefore, we must check if the browser is Safari-based.

const is_safari =
  navigator.userAgent.includes("AppleWebKit/") &&
  !navigator.userAgent.includes("Chrome/");

if (is_safari) {
  document.body.classList.add("safari");
}
```

### Result

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

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

See also
--------

The pseudo-elements used by WebKit/Blink to style other parts of a `<meter>` element are as follows:

* `::-webkit-meter-inner-element`
* `::-webkit-meter-bar`
* `::-webkit-meter-even-less-good-value`
* `::-webkit-meter-suboptimum-value`
mask-border-repeat
==================

The **`mask-border-repeat`** CSS property sets how the edge regions of a source image are adjusted to fit the dimensions of an element's mask border.

Syntax
------


```css
/\* Keyword value \*/
mask-border-repeat: stretch;
mask-border-repeat: repeat;
mask-border-repeat: round;
mask-border-repeat: space;

/\* top and bottom | left and right \*/
mask-border-repeat: round stretch;

/\* Global values \*/
mask-border-repeat: inherit;
mask-border-repeat: initial;
mask-border-repeat: revert;
mask-border-repeat: revert-layer;
mask-border-repeat: unset;
```


The `mask-border-repeat` property may be specified using one or two values chosen from the list of values below.

* When **one** value is specified, it applies the same behavior on **all four sides**.
* When **two** values are specified, the first applies to the **top and bottom**, the second to the **left and right**.
### Values

`stretch`

The source image's edge regions are stretched to fill the gap between each border.

`repeat`

The source image's edge regions are tiled (repeated) to fill the gap between each border. Tiles may be clipped to achieve the proper fit.

`round`

The source image's edge regions are tiled (repeated) to fill the gap between each border. Tiles may be stretched to achieve the proper fit.

`space`

The source image's edge regions are tiled (repeated) to fill the gap between each border. Extra space will be distributed in between tiles to achieve the proper fit.

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

|  |  |
| --- | --- |
| Initial value | `stretch` |
| Applies to | all elements; In SVG, it applies to container elements excluding the `<defs>` element and all graphics elements |
| Inherited | no |
| Computed value | as specified |
| Animation type | discrete |

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

mask-border-repeat =   
  [ stretch | repeat | round | space ]{1,2}    
  
```

Examples
--------

### Basic usage

This property doesn't appear to be supported anywhere yet. When it eventually starts to be supported, it will serve to define how the border mask slice will repeat around the border — i.e. will it just repeat, or be scaled slightly so a whole number of slices fits, or be stretched so one slice fits?


```css
mask-border-repeat: round;
```


Chromium-based browsers support an outdated version of this property — `mask-box-image-repeat` — with a prefix:


```css
-webkit-mask-box-image-repeat: round;
```


**Note:** The `mask-border` page features a working example (using the out-of-date prefixed border mask properties supported in Chromium), so you can get an idea of the effect.

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

| Specification |
| --- |
| CSS Masking Module Level 1 # the-mask-border-repeat |

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

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

See also
--------

* `mask-border`
* `mask-border-mode`
* `mask-border-outset`
* `mask-border-source`
* `mask-border-width`
initial-letter-align
====================

**Experimental:** **This is an experimental technology**  
Check the Browser compatibility table carefully before using this in production.

The **`initial-letter-align`** CSS property specifies the alignment of initial letters within a paragraph.

Syntax
------


```css
/\* Keyword values \*/
initial-letter-align: auto;
initial-letter-align: alphabetic;
initial-letter-align: hanging;
initial-letter-align: ideographic;

/\* Global values \*/
initial-letter-align: inherit;
initial-letter-align: initial;
initial-letter-align: revert;
initial-letter-align: revert-layer;
initial-letter-align: unset;
```


One of the keyword values listed below.

### Values

`auto`

The user agent selects the value which corresponds to the language of the text. Western languages would default to alphabetic, CJK languages to ideographic, and some Indic languages to hanging.

`alphabetic`

As described above, the cap height of the initial letter aligns with the cap height of the first line of text. The baseline of the initial letter aligns with the baseline of the Nth text baseline.

`hanging`

The hanging baseline of the initial letter aligns with the hanging baseline of the first line of text.

`ideographic`

The initial letter is centered in the N-line area.

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

|  |  |
| --- | --- |
| Initial value | `auto` |
| Applies to | `::first-letter` pseudo-elements and inline-level first child of a block container |
| Inherited | no |
| Computed value | as specified |
| Animation type | discrete |

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

initial-letter-align =   
  [ border-box? [ alphabetic | ideographic | hanging | leading ]? ]!    
  
```

Examples
--------

### Aligning initial letter

#### HTML


```html
<p class="auto ">Initial letter - auto</p>
<p class="alphabetic">Initial letter - alphabetic</p>
<p class="hanging">Initial letter - hanging</p>
<p class="ideographic">Initial letter - ideographic</p>
```


#### CSS


```css
.auto::first-letter {
  -webkit-initial-letter-align: auto;
  initial-letter-align: auto;
}

.alphabetic::first-letter {
  -webkit-initial-letter-align: alphabetic;
  initial-letter-align: alphabetic;
}

.hanging::first-letter {
  -webkit-initial-letter-align: hanging;
  initial-letter-align: hanging;
}

.ideographic::first-letter {
  -webkit-initial-letter-align: ideographic;
  initial-letter-align: ideographic;
}
```


#### Result

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

| Specification |
| --- |
| CSS Inline Layout Module Level 3 # aligning-initial-letter |

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

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

See also
--------

* `initial-letter`
* Drop caps in CSS
-webkit-overflow-scrolling
==========================

**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 `-webkit-overflow-scrolling` CSS property controls whether or not touch devices use momentum-based scrolling for a given element.

Syntax
------


```css
/\* Keyword values \*/
-webkit-overflow-scrolling: auto;
-webkit-overflow-scrolling: touch;

/\* Global values \*/
-webkit-overflow-scrolling: inherit;
-webkit-overflow-scrolling: initial;
-webkit-overflow-scrolling: revert;
-webkit-overflow-scrolling: revert-layer;
-webkit-overflow-scrolling: unset;
```

### Values

`auto`

Use "regular" scrolling, where the content immediately ceases to scroll when you remove your finger from the touchscreen.

`touch`

Use momentum-based scrolling, where the content continues to scroll for a while after finishing the scroll gesture and removing your finger from the touchscreen. The speed and duration of the continued scrolling is proportional to how vigorous the scroll gesture was. Also creates a new stacking context.

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

|  |  |
| --- | --- |
| Initial value | `auto` |
| Applies to | scrolling boxes |
| Inherited | yes |
| Computed value | as specified |
| Animation type | discrete |

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

-webkit-overflow-scrolling =
  auto | touch
```

Examples
--------

### HTML


```html
<div class="scroll-touch">
  <p>This paragraph has momentum scrolling</p>
</div>
<div class="scroll-auto">
  <p>This paragraph does not.</p>
</div>
```

### CSS


```css
div {
  width: 100%;
  overflow: auto;
}

p {
  width: 200%;
  background: #f5f9fa;
  border: 2px solid #eaf2f4;
  padding: 10px;
}

.scroll-touch {
  -webkit-overflow-scrolling: touch; /\* Lets it scroll lazy \*/
}

.scroll-auto {
  -webkit-overflow-scrolling: auto; /\* Stops scrolling immediately \*/
}
```

### Results

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

Not part of any standard. Apple has a description in the Safari CSS Reference.

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

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

See also
--------

* CSS-Tricks article with demo
* Smashing Magazine - describing the effect of scroll bouncing and how it works on different web browsers
* Safari 13 Release notes: Indicates the addition of support for one-finger accelerated scrolling to all frames and `overflow:scroll` elements, eliminating the need to set `-webkit-overflow-scrolling: touch`.
inset-inline-end
================

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

Try it
------

Syntax
------


```css
/\* <length> values \*/
inset-inline-end: 3px;
inset-inline-end: 2.4em;

/\* <percentage>s of the width or height of the containing block \*/
inset-inline-end: 10%;

/\* Keyword value \*/
inset-inline-end: auto;

/\* Global values \*/
inset-inline-end: inherit;
inset-inline-end: initial;
inset-inline-end: revert;
inset-inline-end: revert-layer;
inset-inline-end: unset;
```


The shorthand for `inset-inline-start` and `inset-inline-end` is `inset-inline`.

### Values

The `inset-inline-end` property takes the same values as the `left` property.

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

|  |  |
| --- | --- |
| Initial value | `auto` |
| Applies to | positioned elements |
| Inherited | no |
| Percentages | logical-width of containing block |
| Computed value | same as box offsets: `top`, `right`, `bottom`, `left` properties except that directions are logical |
| Animation type | a length, percentage or calc(); |

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

inset-inline-end =   
  auto                 |  
  <length-percentage>    
  
<length-percentage> =   
  <length>      |  
  <percentage>    
  
```

Examples
--------

### Setting inline end offset

#### HTML


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


#### CSS


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

.exampleText {
  writing-mode: vertical-rl;
  position: relative;
  inset-inline-end: 20px;
  background-color: #c8c800;
}
```


#### Result

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

| Specification |
| --- |
| CSS Logical Properties and Values Level 1 # position-properties |

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

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

See also
--------

* The properties which defines other insets: `inset-block-start`, `inset-block-end`, and `inset-inline-start`
* The mapped physical properties: `top`, `right`, `bottom`, and `left`
* `writing-mode`, `direction`, `text-orientation`
scroll-padding-block-end
========================

The `scroll-padding-block-end` property defines offsets for the end edge in the block dimension of the *optimal viewing region* of the scrollport: the region used as the target region for placing things in view of the user. This allows the author to exclude regions of the scrollport that are obscured by other content (such as fixed-positioned toolbars or sidebars) or to put more breathing room between a targeted element and the edges of the scrollport.

Try it
------

Syntax
------


```css
/\* Keyword values \*/
scroll-padding-block-end: auto;

/\* <length> values \*/
scroll-padding-block-end: 10px;
scroll-padding-block-end: 1em;
scroll-padding-block-end: 10%;

/\* Global values \*/
scroll-padding-block-end: inherit;
scroll-padding-block-end: initial;
scroll-padding-block-end: revert;
scroll-padding-block-end: revert-layer;
scroll-padding-block-end: unset;
```

### Values

`<length-percentage>`

An inwards offset from the block end edge of the scrollport, as a valid length or a percentage.

`auto`

The offset is determined by the user agent. This will generally be 0px, but a user agent is able to detect and do something else if a non-zero value is more appropriate.

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

|  |  |
| --- | --- |
| Initial value | `auto` |
| Applies to | scroll containers |
| Inherited | no |
| Percentages | relative to the scroll container's scrollport |
| Computed value | as specified |
| Animation type | by computed value type |

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

scroll-padding-block-end =   
  auto                       |  
  <length-percentage [0,∞]>    
  
<length-percentage> =   
  <length>      |  
  <percentage>    
  
```

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

| Specification |
| --- |
| CSS Scroll Snap Module Level 1 # padding-longhands-logical |

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

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

See also
--------

* CSS scroll snap
* Well-controlled scrolling with CSS scroll snap
mask-image
==========

 The **`mask-image`** CSS property sets the image that is used as mask layer for an element.
 By default this means the alpha channel of the mask image will be multiplied with the alpha channel of the element. This can be controlled with the `mask-mode` property.

Syntax
------


```css
/\* Keyword value \*/
mask-image: none;

/\* <mask-source> value \*/
mask-image: url(masks.svg#mask1);

/\* <image> values \*/
mask-image: linear-gradient(rgb(0 0 0 / 100%), transparent);
mask-image: image(url(mask.png), skyblue);

/\* Multiple values \*/
mask-image: image(url(mask.png), skyblue), linear-gradient(rgb(0 0 0 / 100%), transparent);

/\* Global values \*/
mask-image: inherit;
mask-image: initial;
mask-image: revert;
mask-image: revert-layer;
mask-image: unset;
```

### Values

`none`

This keyword is interpreted as an opaque white image layer.

`<mask-source>`

A `url()` reference to a `<mask>` or to a CSS image.

`<image>`

An image value used as mask image layer.

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

|  |  |
| --- | --- |
| Initial value | `none` |
| Applies to | all elements; In SVG, it applies to container elements excluding the `<defs>` element and all graphics elements |
| Inherited | no |
| Computed value | as specified, but with `url()` values made absolute |
| Animation type | discrete |

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

mask-image =   
  <mask-reference>#    
  
<mask-reference> =   
  none           |  
  <image>        |  
  <mask-source>    
  
<image> =   
  <url>       |  
  <gradient>    
  
<mask-source> =   
  <url>    
  
<url> =   
  <url()>  |  
  <src()>    
  
<url()> =   
  url( <string> <url-modifier>\* )  |  
  <url-token>                        
  
<src()> =   
  src( <string> <url-modifier>\* )    
  
```

Examples
--------

### Setting a mask image with a URL

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

| Specification |
| --- |
| CSS Masking Module Level 1 # the-mask-image |

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

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

See also
--------

* Clipping and Masking in CSS
* Apply effects to images with CSS's mask-image property
:default
========

Baseline Widely available
-------------------------

This feature is well established and works across many devices and browser versions. It’s been available across browsers since January 2020.

* Learn more
* See full compatibility
* Report feedback
The **`:default`** CSS pseudo-class selects form elements that are the default in a group of related elements.

Try it
------

What this selector matches is defined in HTML Standard §4.16.3 Pseudo-classes — it may match the `<button>`, `<input type="checkbox">`, `<input type="radio">`, and `<option>` elements:

* A default option element is the first one with the `selected` attribute, or the first enabled option in DOM order. `multiple` `<select>`s can have more than one `selected` option, so all will match `:default`.
* `<input type="checkbox">` and `<input type="radio">` match if they have the `checked` attribute.
* `<button>` matches if it is a `<form>`'s default submission button: the first `<button>` in DOM order that belongs to the form. This also applies to `<input>` types that submit forms, like `image` or `submit`.
Syntax
------


```css
:default {
  /\* ... \*/
}
```

Examples
--------

### HTML


```html
<fieldset>
  <legend>Favorite season</legend>

  <input type="radio" name="season" id="spring" value="spring" />
  <label for="spring">Spring</label>

  <input type="radio" name="season" id="summer" value="summer" checked />
  <label for="summer">Summer</label>

  <input type="radio" name="season" id="fall" value="fall" />
  <label for="fall">Fall</label>

  <input type="radio" name="season" id="winter" value="winter" />
  <label for="winter">Winter</label>
</fieldset>
```

### CSS


```css
input:default {
  box-shadow: 0 0 2px 1px coral;
}

input:default + label {
  color: coral;
}
```

### Result

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

| Specification |
| --- |
| HTML Standard # selector-default |
| Selectors Level 4 # default-pseudo |

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

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

See also
--------

* Web forms — Working with user data
* Styling web forms
* Related HTML elements: `<button>`, `<input type="checkbox">`, `<input type="radio">`, and `<option>`
padding-block
=============

The **`padding-block`** CSS shorthand property defines the logical block start and end padding of an element, which maps to physical padding properties depending on the element's writing mode, directionality, and text orientation.

Try it
------

Constituent properties
----------------------

This property is a shorthand for the following CSS properties:

* `padding-block-start`
* `padding-block-end`
Syntax
------


```css
/\* <length> values \*/
padding-block: 10px 20px; /\* An absolute length \*/
padding-block: 1em 2em; /\* relative to the text size \*/
padding-block: 10px; /\* sets both start and end values \*/

/\* <percentage> values \*/
padding-block: 5% 2%; /\* relative to the nearest block container's width \*/

/\* Global values \*/
padding-block: inherit;
padding-block: initial;
padding-block: revert;
padding-block: revert-layer;
padding-block: unset;
```


The `padding-block` property may be specified with one or two values. If one value is given, it is used as the value for both `padding-block-start` and `padding-block-end`. If two values are given, the first is used for `padding-block-start` and the second for `padding-block-end`.

### Values

The `padding-block` property takes the same values as the `padding-left` property.

Description
-----------

These values corresponds to the `padding-top` and `padding-bottom`, or `padding-right`, and `padding-left` property depending on the values defined for `writing-mode`, `direction`, and `text-orientation`.

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

|  |  |
| --- | --- |
| Initial value | as each of the properties of the shorthand:* `padding-block-start`: `0`
* `padding-block-end`: `0`
 |
| Applies to | all elements, except `table-row-group`, `table-header-group`, `table-footer-group`, `table-row`, `table-column-group` and `table-column` |
| Inherited | no |
| Percentages | logical-width of containing block |
| Computed value | as each of the properties of the shorthand:* `padding-block-start`: as `<length>`
* `padding-block-end`: as `<length>`
 |
| Animation type | a length |

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

padding-block =   
  <'padding-top'>{1,2}    
  
```

Examples
--------

### Setting block padding for 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-rl;
  padding-block: 20px 40px;
  background-color: #c8c800;
}
```


#### Result

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

| Specification |
| --- |
| CSS Logical Properties and Values Level 1 # propdef-padding-block |

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

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

See also
--------

* CSS Logical Properties and Values
* The mapped physical properties: `padding-top`, `padding-right`, `padding-bottom`, and `padding-left`
* `writing-mode`, `direction`, `text-orientation`