recursal/MDN huggingface dataset:
inherit
=======

The **`inherit`** CSS keyword causes the element to take the computed value of the property from its parent element. It can be applied to any CSS property, including the CSS shorthand property `all`.

For inherited properties, this reinforces the default behavior, and is only needed to override another rule.

**Note:** Inheritance is always from the parent element in the document tree, even when the parent element is not the containing block.

Examples
--------

### Exclude selected elements from a rule


```css
/\* Make second-level headers green \*/
h2 {
  color: green;
}

/\* Leave those in the sidebar alone so they use their parent's color \*/
#sidebar h2 {
  color: inherit;
}
```


In this example, the `h2` elements inside the sidebar might be different colors. For example, consider one of them that would by the child of a `div` matched by the rule:


```css
div#current {
  color: blue;
}
```


Then, it would be blue.

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

| Specification |
| --- |
| CSS Cascading and Inheritance Level 4 # inherit |

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

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

See also
--------

* Inheritance
* Use the `initial` keyword to set a property to its initial value.
* Use the `revert` keyword to reset a property to the value established by the user-agent stylesheet (or by user styles, if any exist).
* Use the `revert-layer` keyword to reset a property to the value established in a previous cascade layer.
* Use the `unset` keyword to set a property to its inherited value if it inherits or to its initial value if not.
* The `all` property lets you reset all properties to their initial, inherited, reverted, or unset state at once.
<display-internal>
==================

Some layout models such as `table` and `ruby` have a complex internal structure, with several different roles that their children and descendants can fill. This page defines those "internal" display values, which only have meaning within that particular layout mode.

Syntax
------

Valid `<display-internal>` values:

`table-row-group`

These elements behave like `<tbody>` HTML elements.

`table-header-group`

These elements behave like `<thead>` HTML elements.

`table-footer-group`

These elements behave like `<tfoot>` HTML elements.

`table-row`

These elements behave like `<tr>` HTML elements.

`table-cell`

These elements behave like `<td>` HTML elements.

`table-column-group`

These elements behave like `<colgroup>` HTML elements.

`table-column`

These elements behave like `<col>` HTML elements.

`table-caption`

These elements behave like `<caption>` HTML elements.

`ruby-base` 
Experimental

These elements behave like `<rb>` HTML elements.

`ruby-text` 
Experimental

These elements behave like `<rt>` HTML elements.

`ruby-base-container` 
Experimental

These elements are generated as anonymous boxes.

`ruby-text-container` 
Experimental

These elements behave like `<rtc>` HTML elements.

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

<display-internal> =   
  table-row-group      |  
  table-header-group   |  
  table-footer-group   |  
  table-row            |  
  table-cell           |  
  table-column-group   |  
  table-column         |  
  table-caption        |  
  ruby-base            |  
  ruby-text            |  
  ruby-base-container  |  
  ruby-text-container    
  
```

Examples
--------

### CSS tables example

The following example demonstrates laying out a simple form using CSS table layout.

#### HTML


```html
<main>
  <div>
    <label for="name">Name</label>
    <input type="text" id="name" name="name" />
  </div>
  <div>
    <label for="age">Age</label>
    <input type="text" id="age" name="age" />
  </div>
</main>
```


#### CSS


```css
main {
  display: table;
}

div {
  display: table-row;
}

label,
input {
  display: table-cell;
  margin: 5px;
}
```


#### Result

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

#### No specification found

No specification data found for `css.properties.display.table_values,css.properties.display.ruby_values`.  
Check for problems with this page or contribute a missing `spec_url` to mdn/browser-compat-data. Also make sure the specification is included in w3c/browser-specs.

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

### css.properties.display.table\_values

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

### css.properties.display.ruby\_values

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-box>`
    + `<display-legacy>`
padding-bottom
==============

The **`padding-bottom`** CSS property sets the height of the padding area on the bottom of an element.

Try it
------

An element's padding area is the space between its content and its border.

![The effect of the CSS padding-bottom property on the element box](/en-US/docs/Web/CSS/padding-bottom/padding-bottom.svg)

**Note:** The `padding` property can be used to set paddings on all four sides of an element with a single declaration.

Syntax
------


```css
/\* <length> values \*/
padding-bottom: 0.5em;
padding-bottom: 0;
padding-bottom: 2cm;

/\* <percentage> value \*/
padding-bottom: 10%;

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


The `padding-bottom` property is specified as a single value chosen from the list below. Unlike margins, negative values are not allowed for padding.

### Values

`<length>`

The size of the padding as a fixed value. Must be nonnegative.

`<percentage>`

The size of the padding as a percentage, relative to the inline size (*width* in a horizontal language, defined by `writing-mode`) of the containing block. Must be nonnegative.

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

|  |  |
| --- | --- |
| Initial value | `0` |
| Applies to | all elements, except `table-row-group`, `table-header-group`, `table-footer-group`, `table-row`, `table-column-group` and `table-column`. It also applies to `::first-letter` and `::first-line`. |
| Inherited | no |
| Percentages | refer to the width of the containing block |
| Computed value | the percentage as specified or the absolute length |
| Animation type | a length |

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

padding-bottom =   
  <length-percentage [0,∞]>    
  
<length-percentage> =   
  <length>      |  
  <percentage>    
  
```

Examples
--------

### Setting padding bottom with pixels and percentages


```css
.content {
  padding-bottom: 5%;
}
.sidebox {
  padding-bottom: 10px;
}
```

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

| Specification |
| --- |
| CSS Box Model Module Level 3 # padding-physical |

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

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

See also
--------

* Introduction to the CSS basic box model
* `padding-top`, `padding-right`, `padding-left` and the `padding` shorthand
* The mapped logical properties: `padding-block-start`, `padding-block-end`, `padding-inline-start`, and `padding-inline-end` and the shorthands `padding-block` and `padding-inline`
:optional
=========

The **`:optional`** CSS pseudo-class represents any `<input>`, `<select>`, or `<textarea>` element that does not have the `required` attribute set on it.

Try it
------

This pseudo-class is useful for styling fields that are not required to submit a form.

**Note:** The `:required` pseudo-class selects *required* form fields.

Syntax
------


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

Examples
--------

### The optional field has a purple border

#### HTML


```html
<form>
  <div class="field">
    <label for="url\_input">Enter a URL:</label>
    <input type="url" id="url\_input" />
  </div>

  <div class="field">
    <label for="email\_input">Enter an email address:</label>
    <input type="email" id="email\_input" required />
  </div>
</form>
```


#### CSS


```css
label {
  display: block;
  margin: 1px;
  padding: 1px;
}

.field {
  margin: 1px;
  padding: 1px;
}

input:optional {
  border-color: rebeccapurple;
  border-width: 3px;
}
```


#### Result

Accessibility concerns
----------------------

If a form contains optional `<input>`s, required inputs should be indicated using the `required` attribute. This will ensure that people navigating with the aid of assistive technology such as a screen reader will be able to understand which inputs need valid content to ensure a successful form submission.

Required inputs should also be indicated visually, using a treatment that does not rely solely on color to convey meaning. Typically, descriptive text and/or an icon are used.

* MDN Understanding WCAG, Guideline 3.3 explanations
* Understanding Success Criterion 3.3.2 | W3C Understanding WCAG 2.0
Specifications
--------------

| Specification |
| --- |
| HTML Standard # selector-optional |
| Selectors Level 4 # opt-pseudos |

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

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

See also
--------

* Other validation-related pseudo-classes: `:required`, `:invalid`, `:valid`
* Form data validation
sin()
=====

The **`sin()`** CSS function is a trigonometric function that returns the sine of a number, which is a value between `-1` and `1`. The function contains a single calculation that must resolve to either a `<number>` or an `<angle>` by interpreting the result of the argument as radians. That is, `sin(45deg)`, `sin(0.125turn)`, and `sin(3.14159 / 4)` all represent the same value, approximately `0.707`.

Syntax
------


```css
/\* Single <angle> values \*/
width: calc(100px * sin(45deg));
width: calc(100px * sin(0.25turn));
width: calc(100px * sin(1.0471967rad));

/\* Single <number> values \*/
width: calc(100px * sin(63.673));
width: calc(100px * sin(2 * 0.125));

/\* Other values \*/
width: calc(100px * sin(pi / 2));
width: calc(100px * sin(e / 4));
```

### Parameter

The `sin(angle)` function accepts only one value as its parameter.

`angle`

A calculation which resolves to a `<number>` or an `<angle>`. When specifying unitless numbers they are interpreted as a number of radians, representing an `<angle>`

### Return value

The sine of an `angle` will always return a number between `−1` and `1`.

* If `angle` is `infinity`, `-infinity`, or `NaN`, the result is `NaN`.
* If `angle` is `0⁻`, the result is `0⁻`.
### Formal syntax
```

<sin()> =   
  sin( <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          
  
```

Examples
--------

### Changing box sizes

In this example, `sin(30deg)` will return `0.5`, making the box have a `50px` width and a `50px` height.


```css
div {
  background-color: red;
  width: calc(sin(30deg) * 100px);
  height: calc(sin(30deg) * 100px);
}
```

### Controlling animation duration

Another use case is to control the `animation-duration`, reducing the duration based on the sine value. In this case, the animation duration will be `1s`.


```css
div {
  animation-name: myAnimation;
  animation-duration: calc(sin(0.25turn) * 1s);
}
```

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

| Specification |
| --- |
| CSS Values and Units Module Level 4 # trig-funcs |

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

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

See also
--------

* `cos()`
* `tan()`
* `asin()`
* `acos()`
* `atan()`
* `atan2()`
@font-feature-values
====================

The **`@font-feature-values`** CSS at-rule lets you use a common name in the `font-variant-alternates` property for features activated differently in OpenType. This can help simplify your CSS when using multiple fonts.

The `@font-feature-values` at-rule may be used either at the top level of your CSS or inside any CSS conditional-group at-rule.

Syntax
------

### Feature value blocks

`@swash`

Specifies a feature name that will work with the `swash()` functional notation of `font-variant-alternates`. A swash feature value definition allows only one value: `ident1: 2` is valid, but `ident2: 2 4` isn't.

`@annotation`

Specifies a feature name that will work with the `annotation()` functional notation of `font-variant-alternates`. An annotation feature value definition allows only one value: `ident1: 2` is valid, but `ident2: 2 4` isn't.

`@ornaments`

Specifies a feature name that will work with the `ornaments()` functional notation of `font-variant-alternates`. An ornaments feature value definition allows only one value: `ident1: 2` is valid, but `ident2: 2 4` isn't.

`@stylistic`

Specifies a feature name that will work with the `stylistic()` functional notation of `font-variant-alternates`. A stylistic feature value definition allows only one value: `ident1: 2` is valid, but `ident2: 2 4` isn't.

`@styleset`

Specifies a feature name that will work with the `styleset()` functional notation of `font-variant-alternates`. A styleset feature value definition allows an unlimited number of values: `ident1: 2 4 12 1` maps to the OpenType values `ss02`, `ss04`, `ss12`, and `ss01`. Note that values higher than `99` are valid, but don't map to any OpenType values and are ignored.

`@character-variant`

Specifies a feature name that will work with the `character-variant()` functional notation of `font-variant-alternates`. A character-variant feature value definition allows either one or two values: `ident1: 3` maps to `cv03=1`, and `ident2: 2 4` maps to `cv02=4`, but `ident2: 2 4 5` is invalid.

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

@font-feature-values =   
  @font-feature-values <family-name># { <declaration-rule-list> }    
  
<family-name> =   
  <string>         |  
  <custom-ident>+    
  
```

Examples
--------

### Using @styleset in a @font-feature-values rule


```css
/\* At-rule for "nice-style" in Font One \*/
@font-feature-values Font One {
  @styleset {
    nice-style: 12;
  }
}

/\* At-rule for "nice-style" in Font Two \*/
@font-feature-values Font Two {
  @styleset {
    nice-style: 4;
  }
}

…

/\* Apply the at-rules with a single declaration \*/
.nice-look {
  font-variant-alternates: styleset(nice-style);
}
```

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

| Specification |
| --- |
| CSS Fonts Module Level 4 # font-feature-values |

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

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

See also
--------

* The `font-variant-alternates` property that uses values that this at-rule defines.
min-width
=========

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

Try it
------

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

Syntax
------


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

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

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

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

### Values

`<length>`

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

`<percentage>`

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

`auto`

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

`max-content`

The intrinsic preferred `min-width`.

`min-content`

The intrinsic minimum `min-width`.

`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 rows, and row groups |
| Inherited | no |
| Percentages | refer to the width of the containing block |
| Computed value | the percentage as specified or the absolute length |
| Animation type | a length, percentage or calc(); |

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

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

Examples
--------

### Setting minimum element width


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

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

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

| Specification |
| --- |
| CSS Box Sizing Module Level 3 # min-size-properties |
| 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
--------

* `width`, `max-width`
* The box model, `box-sizing`
<shape>
=======

**Deprecated:** This feature is no longer recommended. Though some browsers might still support it, it may have already been removed from the relevant web standards, may be in the process of being dropped, or may only be kept for compatibility purposes. Avoid using it, and update existing code if possible; see the compatibility table at the bottom of this page to guide your decision. Be aware that this feature may cease to work at any time.

The **`<shape>`** CSS data type defines the specific form (shape) of a region. The region represents the part of an element to which the `clip` property applies.

**Note:** `<shape>` and `rect()` work in conjunction with `clip`, which has been deprecated in favor of `clip-path`. When possible, use `clip-path` and the `<basic-shape>` data type instead.

Syntax
------

The `<shape>` data type is specified using the `rect()` function, which produces a region in the form of a rectangle.

`rect()`


```css
rect(top, right, bottom, left)
```

### Values

![A graph showing top, right, bottom, and left, as described below. These define the rectangle's shape. The upper left corner is defined by the top and left values. The bottom right corner is defined by the bottom and right values.](/en-US/docs/Web/CSS/shape/rect.png)

*top*

Is a `<length>` representing the offset for the top of the rectangle relative to the top border of the element's box.

*right*

Is a `<length>` representing the offset for the right of the rectangle relative to the left border of the element's box.

*bottom*

Is a `<length>` representing the offset for the bottom of the rectangle relative to the top border of the element's box.

*left*

Is a `<length>` representing the offset for the left of the rectangle relative to the left border of the element's box.

Interpolation
-------------

When animated, values of the `<shape>` data type are interpolated over their `top`, `right`, `bottom`, and `left` components, each treated as a real, floating-point number. The speed of the interpolation is determined by the easing function associated with the animation.

Example
-------

### Example demonstrating correct use of the rect() function


```css
img.clip04 {
  clip: rect(10px, 20px, 20px, 10px);
}
```

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

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

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

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

See also
--------

* Related CSS property: `clip`
:dir()
======

The **`:dir()`** CSS pseudo-class matches elements based on the directionality of the text contained in them.


```css
/\* Selects any element with right-to-left text \*/
:dir(rtl) {
  background-color: red;
}
```


The `:dir()` pseudo-class uses only the *semantic* value of the directionality, i.e., the one defined in the document itself. It doesn't account for *styling* directionality, i.e., the directionality set by CSS properties such as `direction`.

**Note:** Be aware that the behavior of the `:dir()` pseudo-class is not equivalent to the `[dir=…]` attribute selectors. The latter match the HTML `dir` attribute, and ignore elements that lack it — even if they inherit a direction from their parent. (Similarly, `[dir=rtl]` and `[dir=ltr]` won't match the `auto` value.) In contrast, `:dir()` will match the value calculated by the user agent, even if inherited.

**Note:** In HTML, the direction is determined by the `dir` attribute. Other document types may have different methods.

Syntax
------

The `:dir()` pseudo-class requires one parameter, representing the text directionality you want to target.


```css
:dir([ltr | rtl]) {
  /\* ... \*/
}
```

### Parameters

`ltr`

Target left-to-right elements.

`rtl`

Target right-to-left elements.

Examples
--------

### HTML


```html
<div dir="rtl">
  <span>test1</span>
  <div dir="ltr">
    test2
    <div dir="auto">עִבְרִית</div>
  </div>
</div>
```

### CSS


```css
:dir(ltr) {
  background-color: yellow;
}

:dir(rtl) {
  background-color: powderblue;
}
```

### Result

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

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

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

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

See also
--------

* Language-related pseudo-classes: `:lang`, `:dir`
* HTML `lang` attribute
* HTML `translate` attribute
:only-child
===========

The **`:only-child`** CSS pseudo-class represents an element without any siblings. This is the same as `:first-child:last-child` or `:nth-child(1):nth-last-child(1)`, but with a lower specificity.

Try it
------

Syntax
------


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

Examples
--------

### Basic example

#### HTML


```html
<div>
  <div>I am an only child.</div>
</div>

<div>
  <div>I am the 1st sibling.</div>
  <div>I am the 2nd sibling.</div>
  <div>
    I am the 3rd sibling,
    <div>but this is an only child.</div>
  </div>
</div>
```


#### CSS


```css
div:only-child {
  color: red;
}

div {
  display: inline-block;
  margin: 6px;
  outline: 1px solid;
}
```


#### Result

### A list example

#### HTML


```html
<ol>
  <li>
    First
    <ul>
      <li>This list has just one element.</li>
    </ul>
  </li>
  <li>
    Second
    <ul>
      <li>This list has three elements.</li>
      <li>This list has three elements.</li>
      <li>This list has three elements.</li>
    </ul>
  </li>
</ol>
```


#### CSS


```css
li li {
  list-style-type: disc;
}

li:only-child {
  color: red;
  list-style-type: square;
}
```


#### Result

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

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

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

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

See also
--------

* `:only-of-type`
* `:first-child`
* `:last-child`
* `:nth-child`