recursal/MDN huggingface dataset:
min-content
===========

The `min-content` sizing keyword represents the intrinsic minimum width of the content. For text content this means that the content will take all soft-wrapping opportunities, becoming as small as the longest word.

Syntax
------


```css
/\* Used as a length \*/
width: min-content;
inline-size: min-content;
height: min-content;
block-size: min-content;

/\* used in grid tracks \*/
grid-template-columns: 200px 1fr min-content;
```

Examples
--------

### Using min-content for box sizing

#### HTML


```html
<div class="item">Item</div>
<div class="item">Item with more text in it.</div>
```


#### CSS


```css
.item {
  width: min-content;
  background-color: #8ca0ff;
  padding: 5px;
  margin-bottom: 1em;
}
```


#### Result

### Sizing grid columns with min-content

#### HTML


```html
<div id="container">
  <div>Item</div>
  <div>Item with more text in it.</div>
  <div>Flexible item</div>
</div>
```


#### CSS


```css
#container {
  display: grid;
  grid-template-columns: min-content min-content 1fr;
  grid-gap: 5px;
  box-sizing: border-box;
  height: 200px;
  width: 100%;
  background-color: #8cffa0;
  padding: 10px;
}

#container > div {
  background-color: #8ca0ff;
  padding: 5px;
}
```


#### Result

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

| Specification |
| --- |
| CSS Box Sizing Module Level 3 # valdef-width-min-content |

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

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

See also
--------

* Related sizing keywords: `max-content`, `fit-content`
paint-order
===========

The **`paint-order`** CSS property lets you control the order in which the fill and stroke (and painting markers) of text content and shapes are drawn.

Syntax
------


```css
/\* Normal \*/
paint-order: normal;

/\* Single values \*/
paint-order: stroke; /\* draw the stroke first, then fill and markers \*/
paint-order: markers; /\* draw the markers first, then fill and stroke \*/

/\* Multiple values \*/
paint-order: stroke fill; /\* draw the stroke first, then the fill, then the markers \*/
paint-order: markers stroke fill; /\* draw markers, then stroke, then fill \*/

/\* Global values \*/
paint-order: inherit;
paint-order: initial;
paint-order: revert;
paint-order: revert-layer;
paint-order: unset;
```


If no value is specified, the default paint order is `fill`, `stroke`, `markers`.

When one value is specified, that one is painted first, followed by the other two in their default order relative to one another. When two values are specified, they will be painted in the order they are specified in, followed by the unspecified one.

**Note:** In the case of this property, markers are only appropriate when drawing SVG shapes involving the use of the `marker-*` properties (e.g. `marker-start`) and `<marker>` element. They do not apply to HTML text, so in that case, you can only determine the order of `stroke` and `fill`.

### Values

`normal`

Paint the different items in normal paint order.

`stroke`,
 `fill`,
 `markers`

Specify some or all of these values in the order you want them to be painted in.

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

|  |  |
| --- | --- |
| Initial value | `normal` |
| Applies to | text elements |
| Inherited | yes |
| Computed value | as specified |
| Animation type | discrete |

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

paint-order =   
  normal                         |  
  [ fill || stroke || markers ]    
  
```

Examples
--------

### Reversing the paint order of stroke and fill

#### SVG


```html
<svg xmlns="http://www.w3.org/2000/svg" width="400" height="200">
  <text x="10" y="75">stroke in front</text>
  <text x="10" y="150" class="stroke-behind">stroke behind</text>
</svg>
```


#### CSS


```css
text {
  font-family: sans-serif;
  font-size: 50px;
  font-weight: bold;
  fill: black;
  stroke: red;
  stroke-width: 4px;
}

.stroke-behind {
  paint-order: stroke fill;
}
```


#### Result

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

| Specification |
| --- |
| Scalable Vector Graphics (SVG) 2 # PaintOrder |

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

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

See also
--------

* CSS Tricks: paint-order
border-block-color
==================

The **`border-block-color`** CSS property defines the color of the logical block borders 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` and `border-bottom-color`, or `border-right-color` and `border-left-color` property depending on the values defined for `writing-mode`, `direction`, and `text-orientation`.

Try it
------

The border color in the other dimension can be set with `border-inline-color` which sets `border-inline-start-color`, and `border-inline-end-color`.

Syntax
------


```css
border-block-color: yellow;
border-block-color: #f5f6f7;

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

### 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-color =   
  <'border-top-color'>{1,2}    
  
```

Examples
--------

### Border 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-color: red;
}
```


#### Results

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

| Specification |
| --- |
| CSS Logical Properties and Values Level 1 # propdef-border-block-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 the physical border properties: `border-top-color`, `border-right-color`, `border-bottom-color`, or `border-left-color`.
* `writing-mode`, `direction`, `text-orientation`
:nth-of-type()
==============

The **`:nth-of-type()`** CSS pseudo-class matches elements based on their position among siblings of the same type (tag name).

Try it
------

Syntax
------

The `nth-of-type` pseudo-class is specified with a single argument, which represents the pattern for matching elements.

See `:nth-child` for a more detailed explanation of its syntax.


```css
:nth-of-type(<an-plus-b> | even | odd) {
  /\* ... \*/
}
```

Examples
--------

### Basic example

#### HTML


```html
<div>
  <div>This element isn't counted.</div>
  <p>1st paragraph.</p>
  <p class="fancy">2nd paragraph.</p>
  <div>This element isn't counted.</div>
  <p class="fancy">3rd paragraph.</p>
  <p>4th paragraph.</p>
</div>
```


#### CSS


```css
/\* Odd paragraphs \*/
p:nth-of-type(2n + 1) {
  color: red;
}

/\* Even paragraphs \*/
p:nth-of-type(2n) {
  color: blue;
}

/\* First paragraph \*/
p:nth-of-type(1) {
  font-weight: bold;
}

/\* This will match the 3rd paragraph as it will match elements which are 2n+1 AND have a class of fancy.
The second paragraph has a class of fancy but is not matched as it is not :nth-of-type(2n+1) \*/
p.fancy:nth-of-type(2n + 1) {
  text-decoration: underline;
}
```


#### Result

**Note:** There is no way to select the nth-of-class using this selector. The selector looks at the type only when creating the list of matches. You can however apply CSS to an element based on `:nth-of-type` location **and** a class, as shown in the example above.

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

| Specification |
| --- |
| Selectors Level 4 # nth-of-type-pseudo |

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

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

See also
--------

* `:nth-child`, `:nth-last-of-type`
CSS counter styles
==================

The **CSS counter styles** module lets you define your own counter styles to manage the appearance of markers in lists and counters in generated content. It also enables you to extend native browser list styles with your own customizations.

While we think of counters as numbers, they are actually strings with components that can be incremented. The counter styles module defines the `@counter-style` rule with ten descriptors, which enable developers to precisely define how counters are converted into strings. This module enables defining which characters to use for the counter bullets, the prefix to put before the counter and postfix that comes after, along with how to handle negative values. The descriptors can also set a range to limit the values a counter style can handle, while also providing fallback styles for when the counter value falls outside the defined range or otherwise can't render the counter value. The module also enables defining how the counter is read out loud by speech synthesizers.

Reference
---------

### Properties

No properties are defined in this module

### Functions

* `symbols()`
### Data types

* `<counter-style-name>`
* `<symbol>`
* `<symbols-type>`
### At-rules and descriptors

* `@counter-style`
    + `system`
    + `symbols`
    + `additive-symbols`
    + `negative`
    + `prefix`
    + `suffix`
    + `range`
    + `pad`
    + `speak-as`
    + `fallback`
### Interfaces and APIs

* CSS counter styles API
* `CSSCounterStyleRule` interface
Guides
------

Using CSS counters

Describes how to use counters to number any HTML element or to perform complex counting.

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

CSS lists and counters module:

* `counter-increment` property
* `counter-reset` property
* `counter-set` property
* `list-style-type` property
* `list-style` shorthand property
* `counter()` function
* `counters()` function

CSS pseudo-elements module:

* `::after` pseudo-element
* `::before` pseudo-element
* `::marker` pseudo-element

CSS generated content

* `content` property
Specifications
--------------

| Specification |
| --- |
| CSS Counter Styles Level 3  |

See also
--------

* CSS counter styles API
* CSS lists and counters module
* CSS pseudo-elements module
* CSS generated content module
* Ready-made counter styles via W3C (2023)
:-moz-only-whitespace
=====================

**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.

**Note:** In Selectors Level 4, the `:empty` selector was changed to act like `:-moz-only-whitespace`, but no browser currently supports this yet.

The **`:-moz-only-whitespace`** CSS pseudo-class matches elements that only contain text nodes that only contain whitespace. (This includes elements with empty text nodes and elements with no child nodes.)

Syntax
------


```css
:-moz-only-whitespace {
  /\* ... \*/
}
```

Examples
--------

### Simple :-moz-only-whitespace example

#### HTML


```html
<div> </div>
```


#### CSS


```css
div {
  border: 4px solid red;
}

:-moz-only-whitespace {
  border-color: lime;
}
```


#### Result

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

Briefly defined as `:blank` in Selectors Level 4, but then the functionality was merged into `:empty` and `:blank` redefined to mean empty `<input>`.

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

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

See also
--------

* `:blank` 
Experimental
* `:empty`
Actual value
============

The **actual value** of a CSS property is the used value of that property after any necessary approximations have been applied. For example, a user agent that can only render borders with a whole-number pixel width may round the thickness of the border to the nearest integer.

Calculating a property's actual value
-------------------------------------

The user agent performs four steps to calculate a property's actual (final) value:

1. First, the specified value is determined based on the result of cascading, inheritance, or using the initial value.
2. Next, the computed value is calculated according to the specification (for example, a `span` with `position: absolute` will have its computed `display` changed to `block`).
3. Then, layout is calculated, resulting in the used value.
4. Finally, the used value is transformed according to the limitations of the local environment, resulting in the actual value.
Specifications
--------------

| Specification |
| --- |
| Cascading Style Sheets Level 2 Revision 2 (CSS 2.2) Specification # actual-value |

See also
--------

* CSS key concepts:
    + CSS syntax
    + At-rules
    + Comments
    + Specificity
    + Inheritance
    + Box model
    + Layout modes
    + Visual formatting models
    + Margin collapsing
    + Values
        - Initial values
        - Computed values
        - Used values
    + Value definition syntax
    + Shorthand properties
    + Replaced elements
text-emphasis-style
===================

The **`text-emphasis-style`** CSS property sets the appearance of emphasis marks. It can also be set, and reset, using the `text-emphasis` shorthand.

Try it
------

Syntax
------


```css
/\* Initial value \*/
text-emphasis-style: none; /\* No emphasis marks \*/

/\* <string> values \*/
text-emphasis-style: "x";
text-emphasis-style: "点";
text-emphasis-style: "\25B2";
text-emphasis-style: "\*";
text-emphasis-style: "foo"; /\* Should NOT be used. It may be computed to or rendered as 'f' only \*/

/\* Keyword values \*/
text-emphasis-style: filled;
text-emphasis-style: open;
text-emphasis-style: dot;
text-emphasis-style: circle;
text-emphasis-style: double-circle;
text-emphasis-style: triangle;
text-emphasis-style: filled sesame;
text-emphasis-style: open sesame;

/\* Global values \*/
text-emphasis-style: inherit;
text-emphasis-style: initial;
text-emphasis-style: revert;
text-emphasis-style: revert-layer;
text-emphasis-style: unset;
```

### Values

`none`

No emphasis marks.

`filled`

The shape is filled with solid color. If neither `filled` nor `open` is present, this is the default.

`open`

The shape is hollow.

`dot`

Display small circles as marks. The filled dot is `'•'` (`U+2022`), and the open dot is `'◦'` (`U+25E6`).

`circle`

Display large circles as marks. The filled circle is `'●'` (`U+25CF`), and the open circle is `'○'` (`U+25CB`).

`double-circle`

Display double circles as marks. The filled double-circle is `'◉'` (`U+25C9`), and the open double-circle is `'◎'` (`U+25CE`).

`triangle`

Display triangles as marks. The filled triangle is `'▲'` (`U+25B2`), and the open triangle is `'△'` (`U+25B3`).

`sesame`

Display sesames as marks. The filled sesame is `'﹅'` (`U+FE45`), and the open sesame is `'﹆'` (`U+FE46`).

`<string>`

Display the given string as marks. Authors should not specify more than one *character* in `<string>`. The UA may truncate or ignore strings consisting of more than one grapheme cluster.

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

|  |  |
| --- | --- |
| Initial value | `none` |
| Applies to | all elements |
| Inherited | yes |
| Computed value | as specified |
| Animation type | discrete |

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

text-emphasis-style =   
  none                                                |  
  [ [ filled | open ] || [ dot | circle | double-circle | triangle | sesame ] ]  |  
  <string>                                              
  
```

Examples
--------

### Basic example


```css
h2 {
  -webkit-text-emphasis-style: sesame;
  text-emphasis-style: sesame;
}
```

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

| Specification |
| --- |
| CSS Text Decoration Module Level 3 # text-emphasis-style-property |

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

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

See also
--------

* The related properties `text-emphasis-color`, `text-emphasis`.
* The `text-emphasis-position` property allowing to define the position of the emphasis marks.
:-moz-window-inactive
=====================

**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-window-inactive`** CSS pseudo-class is a Mozilla extension that matches any element while it's in an inactive window.

`:-moz-window-inactive` works in content HTML documents, too.

**Note:** Prior to the addition of this pseudo-class, giving different styles to background windows was achieved by setting an attribute (`active="true"`) on the top-level XUL chrome window. This attribute is no longer used.

Syntax
------


```css
:-moz-window-inactive {
  /\* ... \*/
}
```

Examples
--------

This example alters the appearance of a box's background depending on whether its window is active or not.

### HTML


```html
<div id="mybox">
  <p>This is a box!</p>
</div>
```

### CSS


```css
#mybox {
  background: linear-gradient(to bottom, yellow, cyan);
  width: 200px;
  height: 200px;
}

#mybox:-moz-window-inactive {
  background: cyan;
}
```

### Result

The result of this code is shown below. You can view this as a separate page as well.

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

Not part of any standard.

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

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

See also
--------

* Mozilla CSS extensions
* Related CSS selectors:
    + `:active`
* The `Document.activeElement` property for regular DOM, and the `ShadowRoot.activeElement` property for shadow DOM roots.
CSS fragmentation
=================

The **CSS fragmentation** module defines how content is displayed when it is broken (fragmented) across multiple pages, regions, or columns.

Fragmentation occurs when an inline box wraps onto multiple lines. It also occurs when a block spans more than one column inside a column layout container, or spans a page break when printed. Each piece of the rendering for the element is called a *fragment*.

Reference
---------

### Properties

* `box-decoration-break`
* `break-after`
* `break-before`
* `break-inside`
* `orphans`
* `widows`
Specifications
--------------

| Specification |
| --- |
| CSS Fragmentation Module Level 3  |
line-height-step
================

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

The **`line-height-step`** CSS property sets the step unit for line box heights. When the property is set, line box heights are rounded up to the closest multiple of the unit.

Syntax
------


```css
/\* Point values \*/
line-height-step: 18pt;

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


The `line-height-step` property is specified as any one of the following:

* a `<length>`.
### Values

`<length>`

The specified `<length>` is used in the calculation of the line box height step.

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

|  |  |
| --- | --- |
| Initial value | `0` |
| Applies to | block containers |
| Inherited | yes |
| Computed value | absolute `<length>` |
| Animation type | by computed value type |

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

line-height-step =   
  <length [0,∞]>    
  
```

Examples
--------

### Setting step unit for line box height

In the following example, the height of line box in each paragraph is rounded up to the step unit. The line box in `<h1>` does not fit into one step unit and thus occupies two, but it is still centered within the two step unit.


```css
:root {
  font-size: 12pt;
  --my-grid: 18pt;
  line-height-step: var(--my-grid);
}
h1 {
  font-size: 20pt;
  margin-top: calc(2 * var(--my-grid));
}
```


The result of these rules is shown below in the following screenshot:

![How the line-height-step property affects the appearance of text.](/en-US/docs/Web/CSS/line-height-step/line-grid-center.png)

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

| Specification |
| --- |
| CSS Rhythmic Sizing # line-height-step |

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

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

See also
--------

* `font`
* `font-size`
* `line-height`
::-webkit-search-results-button
===============================

**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-search-results-button`** CSS pseudo-element represents a button (the "search results button") at the left edge of an `<input>` of `type="search"` which when clicked displays a menu which allows the user to choose from previous recent search queries. This button and pseudo-element are non-standard, supported only in WebKit and Blink, hence the vendor prefix. The search results button is only shown on search `<input>` elements that have a `results` attribute.

Syntax
------


```css
selector::-webkit-search-results-button {
  /\* ... \*/
}
```

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

Not part of any standard.

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

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

See also
--------

* `::-webkit-search-cancel-button`
border-block-width
==================

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

Try it
------

The border width in the other dimension can be set with `border-inline-width`, which sets `border-inline-start-width`, and `border-inline-end-width`.

Syntax
------


```css
/\* <'border-width'> values \*/
border-block-width: 5px;
border-block-width: thick;

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

### Values

`<'border-width'>`

The width of the border. See `border-width`.

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

|  |  |
| --- | --- |
| Initial value | `medium` |
| Applies to | all elements |
| Inherited | no |
| Percentages | logical-width of containing block |
| Computed value | absolute length; `0` if the border style is `none` or `hidden` |
| Animation type | by computed value type |

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

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

Examples
--------

### Border width 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: 1px solid blue;
  border-block-width: 5px;
}
```


#### Results

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

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

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-width`, `border-right-width`, `border-bottom-width`, and `border-left-width`
* `writing-mode`, `direction`, `text-orientation`