recursal/MDN huggingface dataset:
border-left
===========

The **`border-left`** shorthand CSS property sets all the properties of an element's left border.

Try it
------

As with all shorthand properties, `border-left` always sets the values of all of the properties that it can set, even if they are not specified. It sets those that are not specified to their default values. Consider the following code:


```css
border-left-style: dotted;
border-left: thick green;
```


It is actually the same as this one:


```css
border-left-style: dotted;
border-left: none thick green;
```


The value of `border-left-style` given before `border-left` is ignored. Since the default value of `border-left-style` is `none`, not specifying the `border-style` part results in no border.

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

This property is a shorthand for the following CSS properties:

* `border-left-color`
* `border-left-style`
* `border-left-width`
Syntax
------


```css
border-left: 1px;
border-left: 2px dotted;
border-left: medium dashed blue;

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


The three values of the shorthand property can be specified in any order, and one or two of them may be omitted.

### Values

`<br-width>`

See `border-left-width`.

`<br-style>`

See `border-left-style`.

`<color>`

See `border-left-color`.

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

|  |  |
| --- | --- |
| Initial value | as each of the properties of the shorthand:* `border-left-width`: `medium`
* `border-left-style`: `none`
* `border-left-color`: `currentcolor`
 |
| Applies to | all elements. It also applies to `::first-letter`. |
| Inherited | no |
| Computed value | as each of the properties of the shorthand:* `border-left-width`: the absolute length or `0` if `border-left-style` is `none` or `hidden`
* `border-left-style`: as specified
* `border-left-color`: computed color
 |
| Animation type | as each of the properties of the shorthand:* `border-left-color`: a color
* `border-left-style`: discrete
* `border-left-width`: a length
 |

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

border-left =   
  <line-width>  ||  
  <line-style>  ||  
  <color>         
  
<line-width> =   
  <length [0,∞]>  |  
  thin            |  
  medium          |  
  thick             
  
<line-style> =   
  none    |  
  hidden  |  
  dotted  |  
  dashed  |  
  solid   |  
  double  |  
  groove  |  
  ridge   |  
  inset   |  
  outset    
  
```

Examples
--------

### Applying a left border

#### HTML


```html
<div>This box has a border on the left side.</div>
```


#### CSS


```css
div {
  border-left: 4px dashed blue;
  background-color: gold;
  height: 100px;
  width: 100px;
  font-weight: bold;
  text-align: center;
}
```


#### Results

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

| Specification |
| --- |
| CSS Backgrounds and Borders Module Level 3 # border-shorthands |

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

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

See also
--------

* `border`
* `border-block`
* `outline`
* Backgrounds and borders
* Learn CSS: Backgrounds and borders
<display-legacy>
================

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

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

* Learn more
* See full compatibility
* Report feedback
CSS 2 used a single-keyword syntax for the `display` property, requiring separate keywords for block-level and inline-level variants of the same layout mode. This page details those values.

Syntax
------

Valid `<display-legacy>` values:

`inline-block`

The element generates a block element box that will be flowed with surrounding content as if it were a single inline box (behaving much like a replaced element would).

It is equivalent to `inline flow-root`.

`inline-table`

The `inline-table` value does not have a direct mapping in HTML. It behaves like an HTML `<table>` element, but as an inline box, rather than a block-level box. Inside the table box is a block-level context.

It is equivalent to `inline table`.

`inline-flex`

The element behaves like an inline element and lays out its content according to the flexbox model.

It is equivalent to `inline flex`.

`inline-grid`

The element behaves like an inline element and lays out its content according to the grid model.

It is equivalent to `inline grid`.

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

<display-legacy> =   
  inline-block  |  
  inline-table  |  
  inline-flex   |  
  inline-grid     
  
```

Examples
--------

In the below example, we are creating an inline flex container with the legacy keyword inline-flex.

### HTML


```html
<div class="container">
  <div>Flex Item</div>
  <div>Flex Item</div>
</div>

Not a flex item
```

### CSS


```css
.container {
  display: inline-flex;
}
```

### Result

In the new syntax the inline flex container would be created using two values, inline for the outer display type, and flex for the inner display type.


```css
.container {
  display: inline flex;
}
```

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

| Specification |
| --- |
| CSS Display Module Level 3 # typedef-display-legacy |

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

### css.properties.display.inline-block

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

### css.properties.display.inline-table

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

### css.properties.display.inline-flex

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

### css.properties.display.inline-grid

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

See also
--------

* `display`
    + `<display-outside>`
    + `<display-inside>`
    + `<display-listitem>`
    + `<display-internal>`
    + `<display-box>`
-webkit-text-stroke
===================

The **`-webkit-text-stroke`** CSS property specifies the width and color of strokes for text characters. This is a shorthand property for the longhand properties `-webkit-text-stroke-width` and `-webkit-text-stroke-color`.


```css
/\* Width and color values \*/
-webkit-text-stroke: 4px navy;
text-stroke: 4px navy;

/\* Global values \*/
-webkit-text-stroke: inherit;
-webkit-text-stroke: initial;
-webkit-text-stroke: revert;
-webkit-text-stroke: revert-layer;
-webkit-text-stroke: unset;
```

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

This property is a shorthand for the following CSS properties:

* `-webkit-text-stroke-color`
* `-webkit-text-stroke-width`
Syntax
------

### Values

`<length>`

The width of the stroke.

`<color>`

The color of the stroke.

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

|  |  |
| --- | --- |
| Initial value | as each of the properties of the shorthand:* `-webkit-text-stroke-width`: `0`
* `-webkit-text-stroke-color`: `currentcolor`
 |
| Applies to | all elements |
| Inherited | yes |
| Computed value | as each of the properties of the shorthand:* `-webkit-text-stroke-width`: absolute `<length>`
* `-webkit-text-stroke-color`: computed color
 |
| Animation type | as each of the properties of the shorthand:* `-webkit-text-stroke-width`: discrete
* `-webkit-text-stroke-color`: a color
 |

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

-webkit-text-stroke =   
  <line-width>  ||  
  <color>         
  
<line-width> =   
  <length [0,∞]>  |  
  thin            |  
  medium          |  
  thick             
  
```

Examples
--------

### Adding a red text stroke

#### HTML


```html
<p id="example">The stroke of this text is red.</p>
```


#### CSS


```css
#example {
  font-size: 3em;
  margin: 0;
  -webkit-text-stroke: 2px red;
}
```


#### Result

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

| Specification |
| --- |
| Compatibility Standard # the-webkit-text-stroke |

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

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

See also
--------

* Surfin' Safari blog post announcing this feature
* CSS-Tricks article explaining this feature
* `-webkit-text-stroke-width`
* `-webkit-text-stroke-color`
* `-webkit-text-fill-color`
min-height
==========

The **`min-height`** CSS property sets the minimum height of an element. It prevents the used value of the `height` property from becoming smaller than the value specified for `min-height`.

Try it
------

The element's height is set to the value of `min-height` whenever `min-height` is larger than `max-height` or `height`.

Syntax
------


```css
/\* <length> value \*/
min-height: 3.5em;

/\* <percentage> value \*/
min-height: 10%;

/\* Keyword values \*/
min-height: max-content;
min-height: min-content;
min-height: fit-content;
min-height: fit-content(20em);

/\* Global values \*/
min-height: inherit;
min-height: initial;
min-height: revert;
min-height: revert-layer;
min-height: unset;
```

### Values

`<length>`

Defines the `min-height` as an absolute value.

`<percentage>`

Defines the `min-height` as a percentage of the containing block's height.

`auto`

The browser will calculate and select a `min-height` for the specified element.

`max-content`

The intrinsic preferred `min-height`.

`min-content`

The intrinsic minimum `min-height`.

`fit-content`

Use the available space, but not more than max-content, i.e `min(max-content, max(min-content, stretch))`.

`fit-content(`<length-percentage>`)` 
Experimental

Uses the `fit-content` formula with the available space replaced by the specified argument, i.e. `min(max-content, max(min-content, argument))`.

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

|  |  |
| --- | --- |
| Initial value | `auto` |
| Applies to | all elements but non-replaced inline elements, table columns, and column groups |
| Inherited | no |
| Percentages | The percentage is calculated with respect to the height of the generated box's containing block. If the height of the containing block is not specified explicitly (i.e., it depends on content height), and this element is not absolutely positioned, the percentage value is treated as `0`. |
| Computed value | the percentage as specified or the absolute length |
| Animation type | a length, percentage or calc(); |

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

min-height =   
  auto                                      |  
  <length-percentage [0,∞]>                 |  
  min-content                               |  
  max-content                               |  
  fit-content( <length-percentage [0,∞]> )    
  
<length-percentage> =   
  <length>      |  
  <percentage>    
  
```

Examples
--------

### Setting min-height


```css
table {
  min-height: 75%;
}

form {
  min-height: 0;
}
```

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

| Specification |
| --- |
| CSS Box Sizing Module Level 3 # width-height-keywords |
| CSS Box Sizing Module Level 4 # sizing-values |

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

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

See also
--------

* The box model, `box-sizing`
* `height`, `max-height`
::-moz-progress-bar
===================

**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-progress-bar`** CSS pseudo-element is a Mozilla extension that represents the progress bar inside a `<progress>` element. (The bar represents the amount of progress that has been made.)

If you want to select the unfinished part of `<progress>` in Mozilla, please select the `<progress>` directly.

Syntax
------


```css
::-moz-progress-bar {
  /\* ... \*/
}
```

Examples
--------

### HTML


```html
<progress value="30" max="100">30%</progress>
<progress max="100">Indeterminate</progress>
```

### CSS


```css
::-moz-progress-bar {
  background-color: red;
}

/\* Force indeterminate bars to have zero width \*/
:indeterminate::-moz-progress-bar {
  width: 0;
}
```

### Result

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

Not part of any standard.

See also
--------

* `<progress>`
* `::-webkit-progress-bar`
* `::-webkit-progress-value`
* `::-webkit-progress-inner-element`
rem()
=====

The **`rem()`** CSS function returns a remainder left over when the first parameter is divided by the second parameter, similar to the JavaScript remainder operator (`%`). The remainder is the value left over when one operand, the dividend, is divided by a second operand, the divisor. It always takes the sign of the dividend.

> 
> For example, the CSS `rem(27, 5)` function returns the remainder of `2`. When dividing 27 by 5, the result is 5 with a remainder of 2. The full calculation is `27 / 5 = 5 * 5 + 2`.
> 
> 
> 

Syntax
------


```css
/\* Unitless <number> \*/
line-height: rem(21, 2); /\* 1 \*/
line-height: rem(14, 5); /\* 4 \*/
line-height: rem(5.5, 2); /\* 1.5 \*/

/\* Unit based <percentage> and <dimension> \*/
margin: rem(14%, 3%); /\* 2% \*/
margin: rem(18px, 5px); /\* 3px \*/
margin: rem(10rem, 6rem); /\* 4rem \*/
margin: rem(26vmin, 7vmin); /\* 5vmin \*/
margin: rem(1000px, 29rem); /\* 72px - if root font-size is 16px \*/

/\* Negative/positive values \*/
rotate: rem(200deg, 30deg); /\* 20deg \*/
rotate: rem(140deg, -90deg); /\* 50deg \*/
rotate: rem(-90deg, 20deg); /\* -10deg \*/
rotate: rem(-55deg, -15deg); /\* -10deg \*/

/\* Calculations \*/
scale: rem(10 * 2, 1.7); /\* 1.3 \*/
rotate: rem(10turn, 18turn / 3); /\* 4turn \*/
transition-duration: rem(20s / 2, 3000ms * 2); /\* 4s \*/
```

### Parameter

The `rem(dividend, divisor)` function accepts two comma-separated values as its parameters. Both parameters must have the same type, number, dimension, or `<percentage>`, for the function to be valid. While the units in the two parameters don't need to be the same, they do need of the same dimension type, such as `<length>`, `<angle>`, `<time>`, or `<frequency>` to be valid.

`dividend`

A calculation that resolves to a `<number>`, `<dimension>`, or `<percentage>` representing the dividend.

`divisor`

A calculation that resolves to a `<number>`, `<dimension>`, or `<percentage>` representing the divisor.

### Return value

Returns a `<number>`, `<dimension>`, or `<percentage>` (corresponds to the parameters' type) representing the remainder, that is, the operation left over.

* If `divisor` is `0`, the result is `NaN`.
* If `dividend` is `infinite`, the result is `NaN`.
* If `dividend` is positive the result is positive (`0⁺`), and if `dividend` is negative the result is negative (`0⁻`).
### Formal syntax
```

<rem()> =   
  rem( <calc-sum> , <calc-sum> )    
  
<calc-sum> =   
  <calc-product> [ [ '+' | '-' ] <calc-product> ]\*    
  
<calc-product> =   
  <calc-value> [ [ '*' | '/' ] <calc-value> ]\*    
  
<calc-value> =   
  <number>        |  
  <dimension>     |  
  <percentage>    |  
  <calc-keyword>  |  
  ( <calc-sum> )    
  
<calc-keyword> =   
  e          |  
  pi         |  
  infinity   |  
  -infinity  |  
  NaN          
  
```

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

| Specification |
| --- |
| CSS Values and Units Module Level 4 # funcdef-rem |

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

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

See also
--------

* `round()`
* `mod()`
:first-child
============

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

Try it
------

Syntax
------


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

Examples
--------

### Basic example

#### HTML


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

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


#### CSS


```css
p:first-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:first-child {
  color: red;
  font-weight: bold;
}
```


#### Result

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

| Specification |
| --- |
| Selectors Level 4 # first-child-pseudo |

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

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

See also
--------

* `:-moz-first-node` 
Non-standard
* `:first-of-type`
* `:last-child`
* `:nth-child()`
:hover
======

The **`:hover`** CSS pseudo-class matches when the user interacts with an element with a pointing device, but does not necessarily activate it. It is generally triggered when the user hovers over an element with the cursor (mouse pointer).

Try it
------

Styles defined by the `:hover` pseudo-class will be overridden by any subsequent link-related pseudo-class (`:link`, `:visited`, or `:active`) that has at least equal specificity. To style links appropriately, put the `:hover` rule after the `:link` and `:visited` rules but before the `:active` one, as defined by the *LVHA-order*: `:link` — `:visited` — `:hover` — `:active`.

**Note:** The `:hover` pseudo-class is problematic on touchscreens. Depending on the browser, the `:hover` pseudo-class might never match, match only for a moment after touching an element, or continue to match even after the user has stopped touching and until the user touches another element. Web developers should make sure that content is accessible on devices with limited or non-existent hovering capabilities.

Syntax
------


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

Examples
--------

### Basic example

#### HTML


```html
<a href="#">Try hovering over this link.</a>
```


#### CSS


```css
a {
  background-color: powderblue;
  transition: background-color 0.5s;
}

a:hover {
  background-color: gold;
}
```


#### Result

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

| Specification |
| --- |
| HTML Standard # selector-hover |
| Selectors Level 4 # the-hover-pseudo |

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

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

See also
--------

* Chromium bug #370155: Don't make `:hover` sticky on tap on sites that set a mobile viewport
* Chromium bug #306581: Immediately show hover and active states on touch when page isn't scrollable.
CSS shadow parts
================

The **CSS shadow parts** module defines the `::part()` pseudo-element that can be set on a shadow host. Using this pseudo-element, you can enable shadow hosts to expose the selected element in the shadow tree to the outside page for styling purposes.

By default, elements in a shadow tree can be styled only within their respective shadow roots. The CSS shadow parts module enables including a `part` attribute on `<template>` descendants that make up the custom element, exposing the shadow tree node to external styling via the `::part()` pseudo-element.

Reference
---------

### Selectors

* `::part()`
### HTML attributes

* `part`
* `exportparts`
### Definitions

* Shadow tree
Guides
------

CSS pseudo-elements

Alphabetical list of pseudo-elements defined by all the CSS specifications and WebVTT

Web components

Overview of the different APIs that enable creating reusable custom elements or web components.

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

* HTML `<template>` element
* HTML `<slot>` element
* `Element.part` property
* `Element.shadowRoot` property
* `Element.attachShadow()` method
* `ShadowRoot` interface
* CSS scoping module
    + `:host`
    + `:host()`
    + `:host-context()`
    + `::slotted`
Specifications
--------------

| Specification |
| --- |
| CSS Shadow Parts  |

See also
--------

* CSS pseudo elements module
* CSS selectors module
* Using shadow DOM
* Templates: Styling outside of the current scope on web.dev (2023)
mask-composite
==============

The **`mask-composite`** CSS property represents a compositing operation used on the current mask layer with the mask layers below it.

Syntax
------


```css
/\* Keyword values \*/
mask-composite: add;
mask-composite: subtract;
mask-composite: intersect;
mask-composite: exclude;

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


One or more of the keyword values listed below, separated by commas.

### Values

For the composition the current mask layer is referred to as *source*, while all layers below it are referred to as *destination*.

`add`

The source is placed over the destination.

`subtract`

The source is placed, where it falls outside of the destination.

`intersect`

The parts of source that overlap the destination, replace the destination.

`exclude`

The non-overlapping regions of source and destination are combined.

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

|  |  |
| --- | --- |
| Initial value | `add` |
| 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-composite =   
  <compositing-operator>#    
  
<compositing-operator> =   
  add        |  
  subtract   |  
  intersect  |  
  exclude      
  
```

Examples
--------

### Compositing mask layers with addition

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

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

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

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

See also
--------

* Clipping and Masking in CSS
CSS at-rule functions
=====================

**CSS at-rule functions** are at-rule statements that represent complex rules or can invoke special data processing or calculations.

Syntax
------


```css
@identifier function([argument]? [, argument]!) {
}
```


The syntax begins with the at symbol `@` and an at-rule identifier, such as `import`. This is followed by the **name of the at-rule function**, such as `url`, followed by a pair of opening and closing parentheses. One or more arguments are specified inside the parentheses.

Some at-rule functions can take multiple arguments, which are formatted similar to CSS property values. White space is allowed, but it is optional inside the parentheses. Multiple arguments can be separated using a comma or a space.

@import functions
-----------------

The `@import` at-rule is used to import styles from other stylesheets.

`@import url()`

Imports a stylesheet file from the specified URL.

`@import src()`

Imports a stylesheet file from the specified source.

`@import supports()`

Imports a stylesheet file based on browser support.

`@import layer()`

Imports a stylesheet file into the specified cascade layer.

@supports functions
-------------------

The `@supports` at-rule checks for a browser's support for the specified CSS feature and then applies the CSS styling.

`@supports selector()`

Applies CSS rules after checking browser's support for the specified selector syntax.

`@supports font-tech()`

Applies CSS rules after checking browser's support for the specified font technology.

`@supports font-format()`

Applies CSS rules after checking browser's support for the specified font format.

@namespace functions
--------------------

The `@namespace` at-rule is used to specify XML namespaces to be used in a CSS stylesheet.

`@namespace url()`

Defines XML namespace from the specified URL.

`@namespace src()`

Defines XML namespace from the specified source.

@container functions
--------------------

The `@container` at-rule is used to specify styles for a containment context.

`@container style()`

Defines the containment context style.