recursal/MDN huggingface dataset:
Child combinator
================

The **child combinator** (`>`) is placed between two CSS selectors. It matches only those elements matched by the second selector that are the direct children of elements matched by the first.


```css
/\* List items that are children of the "my-things" list \*/
ul.my-things > li {
  margin: 2em;
}
```


Elements matched by the second selector must be the immediate children of the elements matched by the first selector. This is stricter than the descendant combinator, which matches all elements matched by the second selector for which there exists an ancestor element matched by the first selector, regardless of the number of "hops" up the DOM.

Syntax
------


```css
/\* The white space around the > combinator is optional but recommended. \*/
selector1 > selector2 { /\* style properties \*/ }
```

Examples
--------

### CSS


```css
span {
  background-color: aqua;
}

div > span {
  background-color: yellow;
}
```

### HTML


```html
<div>
  <span>
    Span #1, in the div.
    <span>Span #2, in the span that's in the div.</span>
  </span>
</div>
<span>Span #3, not in the div at all.</span>
```

### Result

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

| Specification |
| --- |
| Selectors Level 4 # child-combinators |

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

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

See also
--------

* Descendant combinator
:fullscreen
===========

The **`:fullscreen`** CSS pseudo-class matches every element that is currently in fullscreen mode. If multiple elements have been put into fullscreen mode, this selects them all.

Syntax
------


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

Usage notes
-----------

The `:fullscreen` pseudo-class lets you configure your stylesheets to automatically adjust the size, style, or layout of content when elements switch back and forth between fullscreen and traditional presentations.

Examples
--------

### Styling a Fullscreen Element

This example applies a different background color to a `<div>` element, depending on whether or not it is in fullscreen mode. It includes a `<button>` to toggle fullscreen on and off.


```html
<div class="element">
  <h1>MDN :fullscreen pseudo-class demo</h1>

  <p>
    This demo uses the <code>:fullscreen</code> pseudo-class to automatically
    change the background color of the <code>.element</code> div.
  </p>

  <p>
    Normally, the background is light yellow. In fullscreen mode, the background
    is light pink.
  </p>

  <button class="toggle">Toggle Fullscreen</button>
</div>
```


The `:fullscreen` pseudo-class is used to override the `background-color` of the `<div>` when it is in fullscreen mode.


```css
.element {
  background-color: lightyellow;
}

.element:fullscreen {
  background-color: lightpink;
}
```


The following JavaScript provides an event handler function that toggles fullscreen when the `<button>` is clicked.


```js
document.querySelector(".toggle").addEventListener("click", function (event) {
  if (document.fullscreenElement) {
    // If there is a fullscreen element, exit full screen.
    document.exitFullscreen();
    return;
  }
  // Make the .element div fullscreen.
  document.querySelector(".element").requestFullscreen();
});
```


#### Demo

See the example live.

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

| Specification |
| --- |
| Fullscreen API Standard # :fullscreen-pseudo-class |

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

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

See also
--------

* Fullscreen API
* Guide to the Fullscreen API
* `::backdrop`
* DOM API: `Element.requestFullscreen()`, `Document.exitFullscreen()`, `Document.fullscreenElement`
* `allowfullscreen` attribute
<filter-function>
=================

The **`<filter-function>`** CSS data type represents a graphical effect that can change the appearance of an input image. It is used in the `filter` and `backdrop-filter` properties.

Syntax
------

The `<filter-function>` data type is specified using one of the filter functions listed below. Each function requires an argument which, if invalid, results in no filter being applied.

`blur()`

Blurs the image.

`brightness()`

Makes the image brighter or darker.

`contrast()`

Increases or decreases the image's contrast.

`drop-shadow()`

Applies a drop shadow behind the image.

`grayscale()`

Converts the image to grayscale.

`hue-rotate()`

Changes the overall hue of the image.

`invert()`

Inverts the colors of the image.

`opacity()`

Makes the image transparent.

`saturate()`

Super-saturates or desaturates the input image.

`sepia()`

Converts the image to sepia.

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

<filter-function> =   
  <blur()>         |  
  <brightness()>   |  
  <contrast()>     |  
  <drop-shadow()>  |  
  <grayscale()>    |  
  <hue-rotate()>   |  
  <invert()>       |  
  <opacity()>      |  
  <sepia()>        |  
  <saturate()>       
  
<blur()> =   
  blur( <length>? )    
  
<brightness()> =   
  brightness( [ <number> | <percentage> ]? )    
  
<contrast()> =   
  contrast( [ <number> | <percentage> ]? )    
  
<drop-shadow()> =   
  drop-shadow( [ <color>? && <length>{2,3} ] )    
  
<grayscale()> =   
  grayscale( [ <number> | <percentage> ]? )    
  
<hue-rotate()> =   
  hue-rotate( [ <angle> | <zero> ]? )    
  
<invert()> =   
  invert( [ <number> | <percentage> ]? )    
  
<opacity()> =   
  opacity( [ <number> | <percentage> ]? )    
  
<sepia()> =   
  sepia( [ <number> | <percentage> ]? )    
  
<saturate()> =   
  saturate( [ <number> | <percentage> ]? )    
  
```

Examples
--------

### Filter function comparison

This example provides a simple graphic, along with a select menu to allow you to choose between the different types of filter function, and a slider to allow you to vary the values used inside the filter function. Updating the controls updates the filter effect in real time, allowing you to investigate the effects of different filters.


```css
div {
  width: 300px;
  height: 300px;
  background: url(firefox.png) no-repeat center;
  filter: <filter-function>(<value>);
}
```


 Where the `<filter-function>` is the filter you select from the drop down and the `<value>` is the values you set with the slider:
 '


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

| Specification |
| --- |
| Filter Effects Module Level 1 # typedef-filter-function |

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

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

See also
--------

* Properties that use this data type: `filter` and `backdrop-filter`
columns
=======

The **`columns`** CSS shorthand property sets the number of columns to use when drawing an element's contents, as well as those columns' widths.

Try it
------

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

This property is a shorthand for the following CSS properties:

* `column-count`
* `column-width`
Syntax
------


```css
/\* Column width \*/
columns: 18em;

/\* Column count \*/
columns: auto;
columns: 2;

/\* Both column width and count \*/
columns: 2 auto;
columns: auto 12em;
columns: auto auto;

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


The `columns` property may be specified as one or two of the values listed below, in any order.

### Values

`<'column-width'>`

The ideal column width, defined as a `<length>` or the keyword `auto`. The actual width may be wider or narrower to fit the available space. See `column-width`.

`<'column-count'>`

The ideal number of columns into which the element's content should be flowed, defined as an `<integer>` or the keyword `auto`. If neither this value nor the column's width are `auto`, it merely indicates the maximum allowable number of columns. See `column-count`.

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

|  |  |
| --- | --- |
| Initial value | as each of the properties of the shorthand:* `column-width`: `auto`
* `column-count`: `auto`
 |
| Applies to | Block containers except table wrapper boxes |
| Inherited | no |
| Computed value | as each of the properties of the shorthand:* `column-width`: the absolute length, zero or larger
* `column-count`: as specified
 |
| Animation type | as each of the properties of the shorthand:* `column-width`: a length
* `column-count`: an integer
 |

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

columns =   
  <'column-width'>  ||  
  <'column-count'>    
  
```

Examples
--------

### Setting three equal columns

#### HTML


```html
<p class="content-box">
  This is a bunch of text split into three columns using the CSS `columns`
  property. The text is equally distributed over the columns.
</p>
```


#### CSS


```css
.content-box {
  columns: 3 auto;
}
```


#### Result

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

| Specification |
| --- |
| CSS Multi-column Layout Module Level 1 # columns |

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

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

See also
--------

* `widows`
* `orphans`
* Paged media
* Multiple-column Layout
:required
=========

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

Try it
------

This pseudo-class is useful for highlighting fields that must have valid data before a form can be submitted.

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

Syntax
------


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

Examples
--------

### The required field has a red 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:required {
  border-color: #800000;
  border-width: 3px;
}

input:required:invalid {
  border-color: #c00000;
}
```


#### Result

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

Mandatory `<input>`s should have the `required` attribute applied to them. 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 submission.

If the form also contains optional inputs, required inputs should 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-required |
| 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: `:optional`, `:invalid`, `:valid`
* Form data validation
:any-link
=========

The **`:any-link`** CSS pseudo-class selector represents an element that acts as the source anchor of a hyperlink, independent of whether it has been visited. In other words, it matches every `<a>` or `<area>` element that has an `href` attribute. Thus, it matches all elements that match `:link` or `:visited`.

Try it
------

Syntax
------


```css
:any-link {
  /\* ... \*/
}
```

Examples
--------

### HTML


```html
<a href="https://example.com">External link</a><br />
<a href="#">Internal target link</a><br />
<a>Placeholder link (won't get styled)</a>
```

### CSS


```css
a:any-link {
  border: 1px solid blue;
  color: orange;
}

/\* WebKit browsers \*/
a:-webkit-any-link {
  border: 1px solid blue;
  color: orange;
}
```

### Result

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

| Specification |
| --- |
| Selectors Level 4 # the-any-link-pseudo |

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

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

See also
--------

* Creating hyperlinks
* Matches HTML elements: `<a>` and `<area>` with an `href` attribute
* Related CSS selectors:
    + `:visited`
    + `:link`
:user-valid
===========

The **`:user-valid`** CSS pseudo-class represents any validated form element whose value validates correctly based on its validation constraints. However, unlike `:valid` it only matches once the user has interacted with it.

This pseudo-class is applied according to the following rules:

* If the control does not have focus, and the value is valid, apply this pseudo-class.
* If the control has focus, and the value was valid (including empty) when it gained focus, apply this pseudo-class.
* If the control has focus, and the value was invalid when it gained focus, re-validate on every keystroke.
* If the element is required, the preceding rules apply only if the user has changed the value or attempted to submit the form.

The result is that if the control was valid when the user started interacting with it, the validity styling is changed only when the user shifts focus to another control. However, if the user is trying to correct a previously-flagged value, the control shows immediately when the value becomes valid. Required items are flagged as invalid only if the user changes them or attempts to submit an unchanged invalid value.

Syntax
------


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

Examples
--------

### Setting a color and symbol on :user-valid

 In the following example, the green border and ✅ only display once the user has interacted with the field.
 Try changing the email address to another valid email to see it in action.


```html
<form>
  <label for="email">Email *: </label>
  <input
 id="email"
 name="email"
 type="email"
 value="test@example.com"
 required />
  <span></span>
</form>
```



```css
input:user-valid {
  border: 2px solid green;
}

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

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

| Specification |
| --- |
| Selectors Level 4 # user-valid-pseudo |

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

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

See also
--------

* `:valid`
* `:invalid`
* `:required`
* `:optional`
* `:user-invalid`
Class selectors
===============

The CSS **class selector** matches elements based on the contents of their `class` attribute.


```css
/\* All elements with class="spacious" \*/
.spacious {
  margin: 2em;
}

/\* All <li> elements with class="spacious" \*/
li.spacious {
  margin: 2em;
}

/\* All <li> elements with a class list that includes both "spacious" and "elegant" \*/
/\* For example, class="elegant retro spacious" \*/
li.spacious.elegant {
  margin: 2em;
}
```

Syntax
------


```css
.class\_name { style properties }
```


Note that this is equivalent to the following `attribute selector`:


```css
[class~=class\_name] { style properties }
```

Examples
--------

### CSS


```css
.red {
  color: #f33;
}

.yellow-bg {
  background: #ffa;
}

.fancy {
  font-weight: bold;
  text-shadow: 4px 4px 3px #77f;
}
```

### HTML


```html
<p class="red">This paragraph has red text.</p>
<p class="red yellow-bg">
  This paragraph has red text and a yellow background.
</p>
<p class="red fancy">This paragraph has red text and "fancy" styling.</p>
<p>This is just a regular paragraph.</p>
```

### Result

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

| Specification |
| --- |
| Selectors Level 4 # class-html |

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

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

See also
--------

* CSS Selectors
* Learn CSS: Selectors
CSS images
==========

The **CSS images** module defines the types of images that can be used (the `<image>` type, containing URLs, gradients and other types of images), how to resize them and how they, and other replaced content, interact with the different layout models.

Reference
---------

### Properties

* `image-orientation`
* `image-rendering`
* `image-resolution`
* `object-fit`
* `object-position`
### Functions

* `linear-gradient()`
* `radial-gradient()`
* `repeating-linear-gradient()`
* `repeating-radial-gradient()`
* `conic-gradient()`
* `repeating-conic-gradient()`
* `url()`
* `element()`
* `image()`
* `cross-fade()`
### Data types

* `<gradient>`
* `<image>`
Guides
------

Using CSS gradients

Presents a specific type of CSS images, *gradients*, and how to create and use these.

Implementing image sprites in CSS

Describes the common technique grouping several images in one single document to save download requests and speed up the availability of a page.

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

| Specification |
| --- |
| CSS Images Module Level 3  |
| Compatibility Standard # css-%3Cimage%3E-type |
| CSS Values and Units Module Level 4 # urls |
CSS font loading
================

The **CSS font loading** module describes events and interfaces used for dynamically loading font resources.

Reference
---------

### Interfaces

* `fontFace` interface
    + `FontFace()` constructor
    + `fontFace.family` property
    + `fontFace.style` property
    + `fontFace.weight` property
    + `fontFace.stretch` property
    + `fontFace.unicodeRange` property
    + `fontFace.variant` property
    + `fontFace.featureSettings` property
    + `fontFace.variationSettings` property
    + `fontFace.display` property
    + `fontFace.ascentOverride` property
    + `fontFace.descentOverride` property
    + `fontFace.lineGapOverride` property
    + `fontFace.load()` method (returns a promise)
* `fontFaceSet` interface
* `fontFaceSetLoadEvent` event
Guides
------

CSS font loading API

Overview of the CSS Font Loading API, which provide events and interfaces for dynamically loading font resources.

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

* CSS `@font-face` at-rule
* CSS `@font-feature-values` at-rule
* `CSSFontFaceRule` interface
* Document `fonts` property (returns the `FontFaceSet` object instance)
* WorkerGlobalScope `fonts` property (returns the `FontFaceSet` object instance)
* JavaScript `Promise` object
Specifications
--------------

| Specification |
| --- |
| CSS Font Loading Module Level 3  |

See also
--------

* CSS fonts module
margin-block
============

The **`margin-block`** CSS shorthand property defines the logical block start and end margins of an element, which maps to physical margins depending on the element's writing mode, directionality, and text orientation.

Try it
------

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

This property is a shorthand for the following CSS properties:

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


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

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

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


This property corresponds to the `margin-top` and `margin-bottom`, or the `margin-right` and `margin-left` properties, depending on the values defined for `writing-mode`, `direction`, and `text-orientation`.

The `margin-block` property may be specified using one or two values.

* When **one** value is specified, it applies the same margin to **both start and end**.
* When **two** values are specified, the first margin applies to the **start**, the second to the **end**.
### Values

The `margin-block` property takes the same values as the `margin` property.

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

|  |  |
| --- | --- |
| Initial value | as each of the properties of the shorthand:* `margin-block-start`: `0`
* `margin-block-end`: `0`
 |
| Applies to | same as `margin` |
| Inherited | no |
| Percentages | depends on layout model |
| Computed value | as each of the properties of the shorthand:* `margin-block-start`: if specified as a length, the corresponding absolute length; if specified as a percentage, the specified value; otherwise, `auto`
* `margin-block-end`: if specified as a length, the corresponding absolute length; if specified as a percentage, the specified value; otherwise, `auto`
 |
| Animation type | a length |

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

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

Examples
--------

### Setting block start and end margins

#### CSS


```css
div {
  background-color: yellow;
  width: 120px;
  height: auto;
  border: 1px solid green;
}

p {
  margin: 0;
  margin-block: 20px 40px;
  background-color: tan;
}

.verticalExample {
  writing-mode: vertical-rl;
}
```


#### HTML


```html
<div>
  <p>Example text</p>
</div>
<div class="verticalExample">
  <p>Example text</p>
</div>
```


#### Result

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

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

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 properties: `margin-top`, `margin-right`, `margin-bottom`, and `margin-left`
* `writing-mode`, `direction`, `text-orientation`
-moz-force-broken-image-icon
============================

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

**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 **`-moz-force-broken-image-icon`** extended CSS property can be used to force the broken image icon to be shown even when a broken image has an `alt` attribute.

Syntax
------

### Values

`<integer>`

A value of `1` means that the broken image icon is shown even if the image has an `alt` attribute. When the value `0` is used, the image will act as usual and only display the `alt` attribute.


**Note:** Even if the value is set to `1` the `alt` attribute will still be displayed, alongside the broken image icon.

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

|  |  |
| --- | --- |
| Initial value | `0` |
| Applies to | images |
| Inherited | no |
| Computed value | as specified |
| Animation type | discrete |

Formal syntax
-------------

Error: could not find syntax for this itemExamples
--------

### HTML


```html
<img src="/broken/image/link.png" alt="Broken image link" />
```

### CSS


```css
img {
  -moz-force-broken-image-icon: 1;
  height: 100px;
  width: 100px;
}
```

### Result

**Note:** Unless the image has a specified height and width the broken image icon will not be displayed but the alt attribute will also be hidden if `-moz-force-broken-image-icon` is set to `1`.

Notes
-----

* This property will only work in Gecko-based browsers.
* The use of this property is not recommended. A proper `alt` attribute should be used instead.
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
--------

* Firefox bug 58646