recursal/MDN huggingface dataset:
:indeterminate
==============

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

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

* Learn more
* See full compatibility
* Report feedback
The **`:indeterminate`** CSS pseudo-class represents any form element whose state is indeterminate, such as checkboxes that have been set to an `indeterminate` state with JavaScript, radio buttons which are members of a group in which all radio buttons are unchecked, and `<progress>` elements with no `value` attribute.


```css
/\* Selects any <input> whose state is indeterminate \*/
input:indeterminate {
  background: lime;
}
```


Elements targeted by this selector are:

* `<input type="checkbox">` elements whose `indeterminate` property is set to `true` by JavaScript
* `<input type="radio">` elements, when all radio buttons with the same `name` value in the form are unchecked
* `<progress>` elements in an indeterminate state
Syntax
------
```

:indeterminate
```

Examples
--------

### Checkbox & radio button

This example applies special styles to the labels associated with indeterminate form fields.

#### HTML


```html
<fieldset>
  <legend>Checkbox</legend>
  <div>
    <input type="checkbox" id="checkbox" />
    <label for="checkbox">This checkbox label starts out lime.</label>
  </div>
</fieldset>

<fieldset>
  <legend>Radio</legend>
  <div>
    <input type="radio" id="radio1" name="radioButton" value="val1" />
    <label for="radio1">First radio label starts out lime.</label>
  </div>
  <div>
    <input type="radio" id="radio2" name="radioButton" value="val2" />
    <label for="radio2">Second radio label also starts out lime.</label>
  </div>
</fieldset>
```


#### CSS


```css
input:indeterminate + label {
  background: lime;
}
```


```
fieldset {
  padding: 1em 0.75em;
}

fieldset:first-of-type {
  margin-bottom: 1.5rem;
}

fieldset:not(:first-of-type) > div:not(:last-child) {
  margin-bottom: 0.5rem;
}
```


#### JavaScript


```js
const inputs = document.getElementsByTagName("input");

for (let i = 0; i < inputs.length; i++) {
  inputs[i].indeterminate = true;
}
```


#### Result

### Progress bar

#### HTML


```html
<progress></progress>
```


#### CSS


```css
progress {
  margin: 4px;
}

progress:indeterminate {
  width: 80vw;
  height: 20px;
}
```


#### Result

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

| Specification |
| --- |
| HTML Standard # selector-indeterminate |
| Selectors Level 4 # indeterminate |

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

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

See also
--------

* Web forms — Working with user data
* Styling web forms
* The `<input type="checkbox">` element's `indeterminate` property
* `<input>` and the `HTMLInputElement` interface which implements it.
* The `:checked` CSS selector lets you style checkboxes based on whether they're checked or not
::selection
===========

The **`::selection`** CSS pseudo-element applies styles to the part of a document that has been highlighted by the user (such as clicking and dragging the mouse across text).

Try it
------

Allowable properties
--------------------

Only certain CSS properties can be used with `::selection`:

* `color`
* `background-color`
* `text-decoration` and its associated properties
* `text-shadow`
* `-webkit-text-stroke-color`, `-webkit-text-fill-color` and `-webkit-text-stroke-width`

In particular, `background-image` is ignored.

Syntax
------


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

Examples
--------

### HTML


```html
This text has special styles when you highlight it.
<p>Also try selecting text in this paragraph.</p>
```

### CSS
```

::-moz-selection {
  color: gold;
  background-color: red;
}

p::-moz-selection {
  color: white;
  background-color: blue;
}
```



```css
/\* Make selected text gold on a red background \*/
::selection {
  color: gold;
  background-color: red;
}

/\* Make selected text in a paragraph white on a blue background \*/
p::selection {
  color: white;
  background-color: blue;
}
```

### Result

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

**Don't override selected text styles for purely aesthetic reasons** — users can customize them to suit their needs. For people experiencing cognitive concerns or who are less technologically literate, unexpected changes to selection styles may hurt their understanding of the functionality.

If overridden, it is important to ensure that the **contrast ratio** between the text and background colors of the selection is high enough that people experiencing low vision conditions can read it.

Color contrast ratio is found by comparing the luminosity of the selected text and the selected text background colors. To meet current Web Content Accessibility Guidelines (WCAG), text content must have a contrast ratio of **4.5:1**, or 3:1 for larger text such as headings. (WCAG defines large text as between `18.66px` and `24px` and bold, or `24px` or larger.)

* WebAIM: Color Contrast Checker
* MDN Understanding WCAG, Guideline 1.4 explanations
* Understanding Success Criterion 1.4.3 | W3C Understanding WCAG 2.0
Specifications
--------------

| Specification |
| --- |
| CSS Pseudo-Elements Module Level 4 # selectordef-selection |

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

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

See also
--------

* `pointer-events` - control which events are active on the element
:read-write
===========

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

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

* Learn more
* See full compatibility
* Report feedback
The **`:read-write`** CSS pseudo-class represents an element (such as `input` or `textarea`) that is editable by the user.

Try it
------

Syntax
------


```css
:read-write {
  /\* ... \*/
}
```

Examples
--------

### Confirming form information in read-only/read-write controls

One use of `readonly` form controls is to allow the user to check and verify information that they may have entered in an earlier form (for example, shipping details), while still being able to submit the information along with the rest of the form. We do just this in the example below.

The `:read-only` pseudo-class is used to remove all the styling that makes the inputs look like clickable fields, making them look more like read-only paragraphs. The `:read-write` pseudo-class on the other hand is used to provide some nicer styling to the editable `<textarea>`.


```css
input:-moz-read-only,
textarea:-moz-read-only,
input:read-only,
textarea:read-only {
  border: 0;
  box-shadow: none;
  background-color: white;
}

textarea:-moz-read-write,
textarea:read-write {
  box-shadow: inset 1px 1px 3px #ccc;
  border-radius: 5px;
}
```


You can find the full source code at readonly-confirmation.html; this renders like so:

### Styling read-write non-form controls

This selector doesn't just select `<input>`/`<textarea>` elements — it will select *any* element that can be edited by the user, such as a `<p>` element with `contenteditable` set on it.


```html
<p contenteditable>This paragraph is editable; it is read-write.</p>

<p>This paragraph is not editable; it is read-only.</p>
```



```css
p {
  font-size: 150%;
  padding: 5px;
  border-radius: 5px;
}

p:read-only {
  background-color: red;
  color: white;
}

p:read-write {
  background-color: lime;
}
```

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

| Specification |
| --- |
| HTML Standard # selector-read-write |
| Selectors Level 4 # rw-pseudos |

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

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

See also
--------

* `:read-only`
* HTML `contenteditable` attribute
tab-size
========

The **`tab-size`** CSS property is used to customize the width of tab characters (U+0009).

Try it
------

Syntax
------


```css
/\* <integer> values \*/
tab-size: 4;
tab-size: 0;

/\* <length> values \*/
tab-size: 10px;
tab-size: 2em;

/\* Global values \*/
tab-size: inherit;
tab-size: initial;
tab-size: revert;
tab-size: revert-layer;
tab-size: unset;
```

### Values

`<integer>`

A multiple of the advance width of the space character (U+0020) to be used as the width of tabs. Must be nonnegative.

`<length>`

The width of tabs. Must be nonnegative.

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

|  |  |
| --- | --- |
| Initial value | `8` |
| Applies to | block containers |
| Inherited | yes |
| Computed value | the specified integer or an absolute length |
| Animation type | a length |

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

tab-size =   
  <number [0,∞]>  |  
  <length [0,∞]>    
  
```

Examples
--------

### Expanding by character count


```css
pre {
  tab-size: 4; /\* Set tab size to 4 characters wide \*/
}
```

### Collapse tabs


```css
pre {
  tab-size: 0; /\* Remove indentation \*/
}
```

### Comparing to the default size

This example compares a default tab size with a custom tab size. Note that `white-space` is set to `pre` to prevent the tabs from collapsing.

#### HTML


```html
<p>no tab</p>
<p>&#0009;default tab size of 8 characters wide</p>
<p class="custom">&#0009;custom tab size of 3 characters wide</p>
<p>&nbsp;&nbsp;&nbsp;3 spaces, equivalent to the custom tab size</p>
```


#### CSS


```css
p {
  white-space: pre;
}

.custom {
  tab-size: 3;
}
```


#### Result

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

| Specification |
| --- |
| CSS Text Module Level 3 # tab-size-property |

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

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

See also
--------

* `white-space`
CSS cascade and inheritance
===========================

The **CSS cascade and inheritance** module defines the rules for assigning values to properties by way of cascading and inheritance. This module specifies the rules for finding the specified value for all properties on all elements.

One of the fundamental design principles of CSS is cascading of rules. It allows several style sheets to influence the presentation of a document. CSS property-value declarations define how a document is rendered. Multiple declarations may set different values for the same element and property combination, but only one value can be applied to any CSS property. The CSS cascade module defines how these conflicts are resolved.

The opposite also occurs. Sometimes there are no declarations defining the value of a property. The CSS cascade module defines how these missing values should be set via inheritance or from the property's initial value.

**Note:** The rules for finding the specified values in the page context and its margin boxes are described in the CSS page module.

Reference
---------

### Properties

* `all`
### At-rules

* `@import`
* `@layer`
### Keywords

* `initial`
* `inherit`
* `revert`
* `revert-layer` 
Experimental
* `unset`
* `!important` flag
### Interfaces

* `CSSLayerBlockRule`
* `CSSGroupingRule`
* `CSSLayerStatementRule`
* `CSSRule`
### Key concepts and definitions

* `Specificity`
* Cascade origin and importance
* Values
    + actual value
    + computed value
    + initial value
    + resolved value
    + specified value
    + used value
* Origin types
    + user-agent origin
    + author origin
    + user origin
* Declaring layers
    + named layer
    + anonymous layer
* Glossary: style origin
Guides
------

Introducing the CSS Cascade

Guide to the cascade algorithm that defines how user agents combine property values originating from different sources.

Learn: Cascade, specificity, and inheritance

The most fundamental concepts of CSS — the cascade, specificity, and inheritance — which control how CSS is applied to HTML and how conflicts are resolved.

Learn: Cascade layers

Introduction to cascade layers, a more advanced feature that builds on the fundamental concepts of the CSS cascade and CSS specificity.

CSS inheritance

A guide to CSS inheritance.

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

* Element-attached styles
* Inline styles and the cascade
* Conditional rules for @imports
Specifications
--------------

| Specification |
| --- |
| CSS Cascading and Inheritance Level 4  |
| CSS Cascading and Inheritance Level 5  |

See also
--------

* CSS selectors module
* CSS pseudo-elements module
* CSS paged media module
* CSS conditional rules module
* CSS nesting module
* Shorthand properties
:blank
======

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

**Note:** The `:blank` selector is considered at risk, as the CSSWG keeps changing it.

See CSSWG issue #1967.

The **`:blank`** CSS pseudo-class selects empty user input elements (e.g. `<input>` or `<textarea>`).

Syntax
------


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

Examples
--------

### Simple :blank example

In eventual supporting browsers, the `:blank` pseudo-class will enable developers to highlight in some way input controls that are not required, but still have no content filled in, perhaps as a reminder to users.

#### HTML


```html
<textarea></textarea>
```


#### CSS


```css
textarea:blank {
  border: 3px solid red;
}
```


#### Result

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

| Specification |
| --- |
| Selectors Level 4 # blank-pseudo |

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

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

See also
--------

* `:empty`
-webkit-mask-position-y
=======================

**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-mask-position-y` CSS property sets the initial vertical position of a mask image.

Syntax
------


```css
/\* Keyword values \*/
-webkit-mask-position-y: top;
-webkit-mask-position-y: center;
-webkit-mask-position-y: bottom;

/\* <percentage> values \*/
-webkit-mask-position-y: 100%;
-webkit-mask-position-y: -50%;

/\* <length> values \*/
-webkit-mask-position-y: 50px;
-webkit-mask-position-y: -1cm;

/\* Multiple values \*/
-webkit-mask-position-y:
  50px,
  25%,
  -3em;

/\* Global values \*/
-webkit-mask-position-y: inherit;
-webkit-mask-position-y: initial;
-webkit-mask-position-y: revert;
-webkit-mask-position-y: revert-layer;
-webkit-mask-position-y: unset;
```

### Values

`<length-percentage>`

A length indicating the position of the top side of the image relative to the box's top padding edge. Percentages are calculated against the vertical dimension of the box padding area. A value of `0%` means the top edge of the image is aligned with the box's top padding edge and a value of `100%` means the bottom edge of the image is aligned with the box's bottom padding edge.

`top`

Equivalent to `0%`.

`bottom`

Equivalent to `100%`.

`center`

Equivalent to `50%`.

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

|  |  |
| --- | --- |
| Initial value | `0%` |
| Applies to | all elements |
| Inherited | no |
| Percentages | refer to the size of the box itself |
| Computed value | for `<length>` the absolute value, otherwise a percentage |
| Animation type | discrete |

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

-webkit-mask-position-y =
  [ <length-percentage> | top | center | bottom ]#
```

Examples
--------

### Vertically positioning a mask image


```css
.exampleOne {
  -webkit-mask-image: url(mask.png);
  -webkit-mask-position-y: bottom;
}

.exampleTwo {
  -webkit-mask-image: url(mask.png);
  -webkit-mask-position-y: 25%;
}
```

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-mask-position`, `-webkit-mask-position-x`, `-webkit-mask-origin`, `-webkit-mask-attachment`
-moz-image-region
=================

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

For certain XUL elements and pseudo-elements that use an image from the `list-style-image` property, this property specifies a region of the image that is used in place of the whole image. This allows elements to use different pieces of the same image to improve performance.

The syntax is similar to the `clip` property. All four values are relative to the upper left corner of the image.

Syntax
------


```css
/\* Keyword value \*/
-moz-image-region: auto;

/\* <shape> value \*/
-moz-image-region: rect(0, 8px, 4px, 4px);

/\* Global values \*/
-moz-image-region: inherit;
-moz-image-region: initial;
-moz-image-region: unset;
```

### Values

`auto`

Automatically defines the region of the image to use.

`<shape>`

A shape defining the part of the image to use. The `rect()` function defines a rectangle to use as shape. Its parameters define the top, right, bottom, and left offsets of the edges of the image, in this order.

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

|  |  |
| --- | --- |
| Initial value | `auto` |
| Applies to | XUL `<image>` elements and `:-moz-tree-image`, `:-moz-tree-twisty`, and `:-moz-tree-checkbox` pseudo-elements. **Note:** `-moz-image-region` only works with `<image>` elements where the icon is specified using `list-style-image`. It will not work with XUL `<image src="url" />`. |
| Inherited | yes |
| Computed value | as specified |
| Animation type | discrete |

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

 -moz-image-region =
   <shape> | auto
```

Examples
--------

### Clipping an image


```css
#example-button {
  /\* display only the 4x4 area from the top left of this image \*/
  list-style-image: url("chrome://example/skin/example.png");
  -moz-image-region: rect(0px, 4px, 4px, 0px);
}
#example-button:hover {
  /\* use the 4x4 area to the right of the first for the hovered button \*/
  -moz-image-region: rect(0px, 8px, 4px, 4px);
}
```

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

* `-moz-image-rect()`
:first-of-type
==============

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

Try it
------

Syntax
------


```css
:first-of-type {
  /\* ... \*/
}
```

Examples
--------

### Styling the first paragraph

#### HTML


```html
<h2>Heading</h2>
<p>Paragraph 1</p>
<p>Paragraph 2</p>
```


#### CSS


```css
p:first-of-type {
  color: red;
  font-style: italic;
}
```


#### Result

### Nested elements

This example shows how nested elements can also be targeted. Note that the universal selector (`*`) is implied when no type selector is written.

#### HTML


```html
<article>
  <div>This `div` is first!</div>
  <div>This <span>nested `span` is first</span>!</div>
  <div>
    This <em>nested `em` is first</em>, but this <em>nested `em` is last</em>!
  </div>
  <div>This <span>nested `span` gets styled</span>!</div>
  <p>This `p` qualifies!</p>
  <div>This is the final `div`.</div>
</article>
```


#### CSS


```css
article :first-of-type {
  background-color: pink;
}
```


#### Result

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

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

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

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

See also
--------

* `:first-child`, `:last-of-type`, `:nth-of-type`
<angle-percentage>
==================

The **`<angle-percentage>`** CSS data type represents a value that can be either a `<angle>` or a `<percentage>`.

Where an `<angle-percentage>` is specified as an allowable type, this means that the percentage resolves to an angle and therefore can be used in a `calc()` expression.

Syntax
------

Refer to the documentation for `<angle>` and `<percentage>` for details of the individual syntaxes allowed by this type.

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

<angle-percentage> =   
  <angle>       |  
  <percentage>    
  
```

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

| Specification |
| --- |
| CSS Values and Units Module Level 4 # mixed-percentages |

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

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

See also
--------

* CSS data types
* Using CSS gradients
* `conic-gradient()` and `repeating-conic-gradient()`
<frequency-percentage>
======================

The **`<frequency-percentage>`** CSS data type represents a value that can be either a `<frequency>` or a `<percentage>`. Frequency values, e.g. the pitch of a speaking voice, are not currently used in any CSS properties.

Syntax
------

The value of a `<frequency-percentage>` is either a `<frequency>` or a `<percentage>`; see their individual reference pages for details about their syntaxes.

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

### Use in calc()

Where a `<frequency-percentage>` is specified as an allowable type, this means that the percentage resolves to a frequency and therefore can be used in a `calc()` expression.

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

<frequency-percentage> =   
  <frequency>   |  
  <percentage>    
  
```

Examples
--------

### Valid percentage values
```

90% Positive percentage
+90% Positive percentage with leading +
-90% Negative percentage — not valid for all properties that use percentages
```

### Invalid percentage values
```

90 % No space is allowed between the number and the unit
```

### Valid frequency values
```

12Hz     Positive integer
4.3Hz    Non-integer
14KhZ    The unit is case-insensitive, though non-SI capitalization is not recommended.
+0Hz     Zero, with a leading + and a unit
-0kHz    Zero, with a leading - and a unit
```

### Invalid frequency values
```

12.0     This is a <number>, not an <frequency>, because it is missing a unit.
7 Hz     No space is allowed between the number and the unit.
0        Although unitless zero is an allowable <length>, it's an invalid <frequency>.
```

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

| Specification |
| --- |
| CSS Values and Units Module Level 4 # mixed-percentages |

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

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

See also
--------

* CSS data types
* CSS Values and Units
* Related CSS data types:
    + `<frequency>`
    + `<percentage>`