recursal/MDN huggingface dataset:
Replaced elements
=================

In CSS, a **replaced element** is an element whose representation is outside the scope of CSS; they're external objects whose representation is independent of the CSS formatting model.

Put in simpler terms, they're elements whose contents are not affected by the current document's styles. The position of the replaced element can be affected using CSS, but not the contents of the replaced element itself. Some replaced elements, such as `<iframe>` elements, may have stylesheets of their own, but they don't inherit the styles of the parent document.

The only other impact CSS can have on a replaced element is that there are properties which support controlling the positioning of the element's content within its box. See Controlling object position within the content box for further information.

Replaced elements
-----------------

Typical replaced elements are:

* `<iframe>`
* `<video>`
* `<embed>`
* `<img>`

Some elements are treated as replaced elements only in specific cases:

* `<option>`
* `<audio>`
* `<canvas>`
* `<object>`

HTML spec also says that an `<input>` element can be replaced, because `<input>` elements of the `"image"` type are replaced elements similar to `<img>`. However, other form controls, including other types of `<input>` elements, are explicitly listed as non-replaced elements (the spec describes their default platform-specific rendering with the term "Widgets").

Objects inserted using the CSS `content` property are *anonymous replaced elements*. They are "anonymous" because they don't exist in the HTML markup.

Using CSS with replaced elements
--------------------------------

CSS handles replaced elements specifically in some cases, like when calculating margins and some `auto` values.

Note that some replaced elements, but not all, have intrinsic dimensions or a defined baseline, which is used by some CSS properties, such as `vertical-align`. Only replaced elements can ever have intrinsic dimensions.

### Controlling object position within the content box

Certain CSS properties can be used to specify how the object contained within the replaced element should be positioned within the element's box area. These are defined by the CSS Images specification:

`object-fit`

Specifies how the replaced element's content object should be fitted to the containing element's box.

`object-position`

Specifies the alignment of the replaced element's content object within the element's box.

See also
--------

* HTML Spec
* Void elements
* 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
        - Actual values
    + Value definition syntax
    + Shorthand properties
:valid
======

The **`:valid`** CSS pseudo-class represents any `<input>` or other `<form>` element whose contents validate successfully. This allows to easily make valid fields adopt an appearance that helps the user confirm that their data is formatted properly.

Try it
------

This pseudo-class is useful for highlighting correct fields for the user.

Syntax
------


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

Examples
--------

### Indicating valid and invalid form fields

In this example, we use structures like this, which include extra `<span>`s to generate content on; we'll use these to provide indicators of valid/invalid data:


```html
<div>
  <label for="fname">First name *: </label>
  <input id="fname" name="fname" type="text" required />
  <span></span>
</div>
```


To provide these indicators, we use the following CSS:


```css
input + span {
  position: relative;
}

input + span::before {
  position: absolute;
  right: -20px;
  top: 5px;
}

input:invalid {
  border: 2px solid red;
}

input:invalid + span::before {
  content: "✖";
  color: red;
}

input:valid + span::before {
  content: "✓";
  color: green;
}
```


We set the `<span>`s to `position: relative` so that we can position the generated content relative to them. We then absolutely position different generated content depending on whether the form's data is valid or invalid — a green check or a red cross, respectively. To add a bit of extra urgency to the invalid data, we've also given the inputs a thick red border when invalid.

**Note:** We've used `::before` to add these labels, as we were already using `::after` for the "required" labels.

You can try it below:

Notice how the required text inputs are invalid when empty, but valid when they have something filled in. The email input on the other hand is valid when empty, as it is not required, but invalid when it contains something that is not a proper email address.

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

The color green is commonly used to indicate valid input. People who have certain types of color blindness will be unable to determine the input's state unless it is accompanied by an additional indicator that does not rely on color to convey meaning. Typically, descriptive text and/or an icon are used.

* MDN Understanding WCAG, Guideline 1.4 explanations
* Understanding Success Criterion 1.4.1 | W3C Understanding WCAG 2.0
Specifications
--------------

| Specification |
| --- |
| HTML Standard # selector-valid |
| Selectors Level 4 # validity-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`, `:optional`, `:invalid`
* Form data validation
* Accessing the validity state from JavaScript
scroll-margin-block
===================

The `scroll-margin-block` shorthand property sets the scroll margins of an element in the block dimension.

Try it
------

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

This property is a shorthand for the following CSS properties:

* `scroll-margin-block-end`
* `scroll-margin-block-start`
Syntax
------


```css
/\* <length> values \*/
scroll-margin-block: 10px;
scroll-margin-block: 1em 0.5em;

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

### Values

`<length>`

An outset from the corresponding edge of the scroll container.

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

The scroll-margin values represent outsets defining the scroll snap area that is used for snapping this box to the snapport. The scroll snap area is determined by taking the transformed border box, finding its rectangular bounding box (axis-aligned in the scroll container's coordinate space), then adding the specified outsets.

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

|  |  |
| --- | --- |
| Initial value | as each of the properties of the shorthand:* `scroll-margin-block-start`: `0`
* `scroll-margin-block-end`: `0`
 |
| Applies to | all elements |
| Inherited | no |
| Computed value | as each of the properties of the shorthand:* `scroll-margin-block-start`: as specified
* `scroll-margin-block-end`: as specified
 |
| Animation type | by computed value type |

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

scroll-margin-block =   
  <length>{1,2}    
  
```

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

| Specification |
| --- |
| CSS Scroll Snap Module Level 1 # propdef-scroll-margin-block |

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
Resolved value
==============

The **resolved value** of a CSS property is the value returned by `getComputedStyle()`.

For most properties, it is the computed value, but for a few legacy properties (including `width` and `height`), it is instead the used value. See the specification link below for more per-property details.

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

| Specification |
| --- |
| CSS Object Model (CSSOM) # resolved-values |

See also
--------

* `window.getComputedStyle`
* 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
        - Actual values
    + Value definition syntax
    + Shorthand properties
    + Replaced elements
margin-top
==========

The **`margin-top`** CSS property sets the margin area on the top of an element. A positive value places it farther from its neighbors, while a negative value places it closer.

Try it
------

This property has no effect on *non-replaced* inline elements, such as `<span>` or `<code>`.

Syntax
------


```css
/\* <length> values \*/
margin-top: 10px; /\* An absolute length \*/
margin-top: 1em; /\* relative to the text size \*/
margin-top: 5%; /\* relative to the nearest block container's width \*/

/\* Keyword values \*/
margin-top: auto;

/\* Global values \*/
margin-top: inherit;
margin-top: initial;
margin-top: revert;
margin-top: revert-layer;
margin-top: unset;
```


The `margin-top` property is specified as the keyword `auto`, or a `<length>`, or a `<percentage>`. Its value can be positive, zero, or negative.

### Values

`<length>`

The size of the margin as a fixed value.

`<percentage>`

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

`auto`

The browser selects a suitable value to use. See `margin`.

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

|  |  |
| --- | --- |
| Initial value | `0` |
| Applies to | all elements, except elements with table `display` types other than `table-caption`, `table` and `inline-table`. It also applies to `::first-letter`. |
| 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
-------------
```

margin-top =   
  <length-percentage>  |  
  auto                   
  
<length-percentage> =   
  <length>      |  
  <percentage>    
  
```

Examples
--------

### Setting positive and negative top margins


```css
.content {
  margin-top: 5%;
}
.sidebox {
  margin-top: 10px;
}
.logo {
  margin-top: -5px;
}
#footer {
  margin-top: 1em;
}
```

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

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

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

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

See also
--------

* `margin-right`, `margin-bottom`, and `margin-left` and the `margin` shorthand
* The mapped logical properties: `margin-block-start`, `margin-block-end`, `margin-inline-start`, and `margin-inline-end` and the shorthands `margin-block` and `margin-inline`
scroll-padding-right
====================

The `scroll-padding-right` property defines offsets for the right 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-right: auto;

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

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

### Values

`<length-percentage>`

An inwards offset from the top 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-right =   
  auto                       |  
  <length-percentage [0,∞]>    
  
<length-percentage> =   
  <length>      |  
  <percentage>    
  
```

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

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

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
:-moz-first-node
================

**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-first-node`** CSS pseudo-class is a Mozilla extension that represents any element that is the first child node of some other element. It differs from `:first-child` because it does not match a first-child element with (non-whitespace) text before it.

**Note:** Any whitespace at the start of an element is ignored for the determination of `:-moz-first-node`.

Syntax
------


```css
:-moz-first-node {
  /\* ... \*/
}
```

Examples
--------

### CSS


```css
span:-moz-first-node {
  background-color: lime;
}
```

### HTML


```html
<p>
  <span>This matches!</span>
  <span>This doesn't match.</span>
</p>

<p>
  Blahblah.
  <span>This doesn't match because it's preceded by text.</span>
</p>
```

### Result

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

Not part of any standard.

See also
--------

* `:-moz-last-node`
* `:first-child`
inset-inline-start
==================

The **`inset-inline-start`** CSS property defines the logical inline start 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-start: 3px;
inset-inline-start: 2.4em;

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

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

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


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

### Values

The `inset-inline-start` 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-start =   
  auto                 |  
  <length-percentage>    
  
<length-percentage> =   
  <length>      |  
  <percentage>    
  
```

Examples
--------

### Setting inline start 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-lr;
  position: relative;
  inset-inline-start: 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-end`
* The mapped physical properties: `top`, `right`, `bottom`, and `left`
* `writing-mode`, `direction`, `text-orientation`
border-block-start-style
========================

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

Try it
------

Syntax
------


```css
/\* <'border-style'> values \*/
border-block-start-style: dashed;
border-block-start-style: dotted;
border-block-start-style: groove;

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


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

### Values

`<'border-style'>`

The line style of the border. See `border-style`.

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

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

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

border-block-start-style =   
  <line-style>    
  
<line-style> =   
  none    |  
  hidden  |  
  dotted  |  
  dashed  |  
  solid   |  
  double  |  
  groove  |  
  ridge   |  
  inset   |  
  outset    
  
```

Examples
--------

### Dashed 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: 5px solid blue;
  border-block-start-style: dashed;
}
```


#### Results

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

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

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-style`, `border-right-style`, `border-bottom-style`, or `border-left-style`.
* `writing-mode`, `direction`, `text-orientation`
border-start-start-radius
=========================

The **`border-start-start-radius`** CSS property defines a logical border radius on an element, which maps to a physical border radius that depends on the element's `writing-mode`, `direction`, and `text-orientation`. This is useful when building styles to work regardless of the text orientation and writing mode.

Try it
------

This property affects the corner between the block-start and the inline-start sides of the element. For instance, in a `horizontal-tb` writing mode with `ltr` direction, it corresponds to the `border-top-left-radius` property.

Syntax
------


```css
/\* <length> values \*/
/\* With one value the corner will be a circle \*/
border-start-start-radius: 10px;
border-start-start-radius: 1em;

/\* With two values the corner will be an ellipse \*/
border-start-start-radius: 1em 2em;

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

### Values

`<length-percentage>`

Denotes the size of the circle radius or the semi-major and semi-minor axes of the ellipse. As absolute length it can be expressed in any unit allowed by the CSS `<length>` data type. Percentages for the horizontal axis refer to the width of the box, percentages for the vertical axis refer to the height of the box. Negative values are invalid.

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

|  |  |
| --- | --- |
| Initial value | `0` |
| Applies to | all elements; but User Agents are not required to apply to `table` and `inline-table` elements when `border-collapse` is `collapse`. The behavior on internal table elements is undefined for the moment.. It also applies to `::first-letter`. |
| Inherited | no |
| Percentages | refer to the corresponding dimension of the border box |
| Computed value | two absolute `<length>`s or `<percentage>`s |
| Animation type | a length, percentage or calc(); |

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

border-start-start-radius =   
  <length-percentage [0,∞]>{1,2}    
  
<length-percentage> =   
  <length>      |  
  <percentage>    
  
```

Examples
--------

### Border radius with vertical text

#### HTML


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


#### CSS


```css
div {
  background-color: rebeccapurple;
  width: 120px;
  height: 120px;
  border-start-start-radius: 10px;
}

.exampleText {
  writing-mode: vertical-rl;
  padding: 10px;
  background-color: #fff;
  border-start-start-radius: 10px;
}
```


#### Results

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

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

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 property: `border-top-left-radius`
* `writing-mode`, `direction`, `text-orientation`
:in-range
=========

The **`:in-range`** CSS pseudo-class represents an `<input>` element whose current value is within the range limits specified by the `min` and `max` attributes.

Try it
------

This pseudo-class is useful for giving the user a visual indication that a field's current value is within the permitted limits.

**Note:** This pseudo-class only applies to elements that have (and can take) a range limitation. In the absence of such a limitation, the element can neither be "in-range" nor "out-of-range."

Syntax
------


```css
:in-range {
  /\* ... \*/
}
```

Examples
--------

### HTML


```html
<form action="" id="form1">
  <ul>
    Values between 1 and 10 are valid.
    <li>
      <input
 id="value1"
 name="value1"
 type="number"
 placeholder="1 to 10"
 min="1"
 max="10"
 value="12"
 required />
      <label for="value1">Your value is </label>
    </li>
  </ul>
</form>
```

### CSS


```css
li {
  list-style: none;
  margin-bottom: 1em;
}

input {
  border: 1px solid black;
}

input:in-range {
  background-color: rgb(0 255 0 / 25%);
}

input:out-of-range {
  background-color: rgb(255 0 0 / 25%);
  border: 2px solid red;
}

input:in-range + label::after {
  content: "okay.";
}

input:out-of-range + label::after {
  content: "out of range!";
}
```

### Result

**Note:** An empty `<input>` does not count as out of range, and will not be selected using the `:out-of-range` pseudo-class selector. The `:blank` pseudo-class exists to select blank inputs, although at the time of writing this is experimental and not well-supported. You could also use the `required` attribute and the `:invalid` pseudo-class to provide more general logic and styling for making inputs mandatory (`:invalid` will style blank *and* out-of-range inputs).

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

| Specification |
| --- |
| HTML Standard # selector-in-range |
| Selectors Level 4 # in-range-pseudo |

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

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

See also
--------

* `:out-of-range`
* Form data validation