recursal/MDN huggingface dataset:
:nth-last-of-type()
===================

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

Try it
------

Syntax
------

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

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


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

Examples
--------

### HTML


```html
<div>
  <span>This is a span.</span>
  <span>This is another span.</span>
  <em>This is emphasized.</em>
  <span>Wow, this span gets limed!!!</span>
  <del>This is struck through.</del>
  <span>Here is one last span.</span>
</div>
```

### CSS


```css
span:nth-last-of-type(2) {
  background-color: lime;
}
```

### Result

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

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

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

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

See also
--------

* `:nth-last-child`, `:nth-of-type`
Pseudo-elements
===============

A CSS **pseudo-element** is a keyword added to a selector that lets you style a specific part of the selected element(s).

Syntax
------


```css
selector::pseudo-element {
  property: value;
}
```


For example, `::first-line` can be used to change the font of the first line of a paragraph.


```css
/\* The first line of every <p> element. \*/
p::first-line {
  color: blue;
  text-transform: uppercase;
}
```


Double colons (`::`) are used for pseudo-elements. This distinguishes pseudo-elements from pseudo-classes that use single colon (`:`) in their notation.

You can use only one pseudo-element in a selector. The pseudo-element must appear after all the other components in the complex or compound selector in which it appears. For example, you can select a paragraph's first line using `p::first-line` but not the first-line's children or a hovered first line. So both `p::first-line > *` and `p::first-line:hover` are invalid.

While it is not possible to select an element based on its *state* by using pseudo-elements, a pseudo-element can be used to select and style a part of an element that already has a state applied to it. For example, `p:hover::first-line` selects the first line (pseudo-element) of a paragraph when the paragraph itself is being hovered (pseudo-class).

**Note:** When a selector list contains an invalid selector, the entire style block is ignored.

List of pseudo-elements
-----------------------

Pseudo-elements defined by a set of CSS specifications include the following:

A

* `::after`

B

* `::backdrop`
* `::before`

C

* `::cue`
* `::cue-region`

F

* `::first-letter`
* `::first-line`
* `::file-selector-button`

G

* `::grammar-error` 
Experimental

M

* `::marker`

P

* `::part()`
* `::placeholder`

S

* `::selection`
* `::slotted()`
* `::spelling-error` 
Experimental

T

* `::target-text` 
Experimental

**Note:** Browsers support the single colon syntax only for the original four pseudo-elements: `::before`, `::after`, `::first-line`, and `::first-letter`.

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

| Specification |
| --- |
| CSS Pseudo-Elements Module Level 4  |
| CSS Positioned Layout Module Level 4  |
| CSS Shadow Parts  |
| WebVTT: The Web Video Text Tracks Format  |

See also
--------

* CSS pseudo-element module
* Pseudo-classes
* CSS selectors module
* CSS building blocks: Pseudo-classes and pseudo-elements
::-moz-focus-inner
==================

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

The **`::-moz-focus-inner`** CSS pseudo-element is a Mozilla extension that represents an inner focus ring of the `<button>` element as well as the button, submit, reset, and color types of the `<input>` element.

**Note:** Using `::-moz-focus-inner` with anything than the buttons that support it doesn't match anything and has no effect.

Syntax
------


```css
::-moz-focus-inner {
  /\* ... \*/
}
```

Example
-------

### HTML


```html
<input type="submit" value="Input" /> <button type="submit">Button</button>
```

### CSS


```css
button::-moz-focus-inner,
input[type="color"]::-moz-focus-inner,
input[type="reset"]::-moz-focus-inner,
input[type="button"]::-moz-focus-inner,
input[type="submit"]::-moz-focus-inner {
  padding-block-start: 0px;
  padding-inline-end: 2px;
  padding-block-end: 0px;
  padding-inline-start: 2px;
  border: 2px dotted red;
}
```

### Result

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

Not part of any standard.

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

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

See also
--------

* Mozilla CSS extensions
* Related CSS properties:
    + `-moz-user-focus`
* Related CSS selectors:
    + `:focus`
    + `:focus-visible`
    + `:focus-within`
text-emphasis-color
===================

The **`text-emphasis-color`** CSS property sets the color of emphasis marks. This value can also be set using the `text-emphasis` shorthand.

Try it
------

Syntax
------


```css
/\* Initial value \*/
text-emphasis-color: currentcolor;

/\* <color> \*/
text-emphasis-color: #555;
text-emphasis-color: blue;
text-emphasis-color: rgb(90 200 160 / 80%);
text-emphasis-color: transparent;

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

### Values

`<color>`

Defines the color of the emphasis marks. If no color is present, it defaults to `currentcolor`.

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

|  |  |
| --- | --- |
| Initial value | `currentcolor` |
| Applies to | all elements |
| Inherited | yes |
| Computed value | computed color |
| Animation type | a color |

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

text-emphasis-color =   
  <color>    
  
```

Examples
--------

### Emphasis with a color and custom character

#### CSS


```css
em {
  text-emphasis-color: green;
  text-emphasis-style: "\*";
}
```


#### HTML


```html
<p>Here's an example:</p>

<em>This has emphasis marks!</em>
```


#### Result

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

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

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

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

See also
--------

* The `<color>` data type
* The other emphasis mark related properties: `text-emphasis-style`, `text-emphasis`, and `text-emphasis-position`.
* Other color-related properties: `color`, `background-color`, `border-color`, `outline-color`, `text-emphasis-color`, `text-shadow`, `caret-color`, and `column-rule-color`
* Applying color to HTML elements using CSS
:-moz-submit-invalid
====================

**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-submit-invalid`** CSS pseudo-class is a Mozilla extension that represents any submit `<button>` on forms whose contents aren't valid based on their validation constraints.

By default, no style is applied. You can use this pseudo-class to customize the appearance of the submit button when there are invalid form fields.

Syntax
------


```css
:-moz-submit-invalid {
  /\* ... \*/
}
```

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

* `:valid`
* `:invalid`
* `:required`
* `:optional`
border-inline-end-width
=======================

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

Try it
------

Syntax
------


```css
/\* <'border-width'> values \*/
border-inline-end-width: 2px;
border-inline-end-width: thick;

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


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

### Values

`<'border-width'>`

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

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

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

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

border-inline-end-width =   
  <line-width>    
  
<line-width> =   
  <length [0,∞]>  |  
  thin            |  
  medium          |  
  thick             
  
```

Examples
--------

### Applying a 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: 1px solid blue;
  border-inline-end-width: 5px;
}
```


#### Results

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

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

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

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

See also
--------

* CSS Logical Properties and Values
* This property maps to one of the physical border properties: `border-top-width`, `border-right-width`, `border-bottom-width`, and `border-left-width`
* `writing-mode`, `direction`, `text-orientation`
:-moz-drag-over
===============

**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-drag-over`** CSS pseudo-class is a Mozilla extension that matches an element when a `dragover` event is called on it.

Syntax
------


```css
:-moz-drag-over {
  /\* ... \*/
}
```

Examples
--------

### HTML


```html
<table border="1">
  <tr>
    <td width="100px" height="100px">Drag Over</td>
  </tr>
</table>
```

### CSS


```css
td:-moz-drag-over {
  color: red;
}
```

### Result

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

Not part of any standard.

See also
--------

* Mozilla CSS extensions
* HTML drag and drop
padding-right
=============

The **`padding-right`** CSS property sets the width of the padding area on the right of an element.

Try it
------

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

**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-right: 0.5em;
padding-right: 0;
padding-right: 2cm;

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

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


The `padding-right` 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-right =   
  <length-percentage [0,∞]>    
  
<length-percentage> =   
  <length>      |  
  <percentage>    
  
```

Examples
--------

### Setting right padding using pixels and percentages


```css
.content {
  padding-right: 5%;
}
.sidebox {
  padding-right: 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-bottom`, `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`
border-inline-width
===================

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

Try it
------

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

Syntax
------


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

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

### Values

`<'border-width'>`

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

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

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

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

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

Examples
--------

### HTML


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

### CSS


```css
div {
  background-color: yellow;
  width: 120px;
  height: 120px;
}

.exampleText {
  writing-mode: vertical-lr;
  border: 1px solid blue;
  border-inline-width: 5px 10px;
}
```

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

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

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

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

See also
--------

* CSS Logical Properties and Values
* This property maps to one of the physical border properties: `border-top-width`, `border-right-width`, `border-bottom-width`, and `border-left-width`
* `writing-mode`, `direction`, `text-orientation`
column-width
============

The **`column-width`** CSS property sets the ideal column width in a multi-column layout. The container will have as many columns as can fit without any of them having a width less than the `column-width` value. If the width of the container is narrower than the specified value, the single column's width will be smaller than the declared column width.

Try it
------

This property can help you create responsive designs that fit different screen sizes. Especially in the presence of the `column-count` property (which has precedence), you must specify all related length values to achieve an exact column width. In horizontal text these are `width`, `column-width`, `column-gap`, and `column-rule-width`.

Syntax
------


```css
/\* Keyword value \*/
column-width: auto;

/\* <length> values \*/
column-width: 60px;
column-width: 15.5em;
column-width: 3.3vw;

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


The `column-width` property is specified as one of the values listed below.

### Values

`<length>`

Indicates the optimal column width. The actual column width may differ from the specified value: it may be wider when necessary to fill available space, and narrower when the available space is too small. The value must be strictly positive or the declaration is invalid. Percentage values are also invalid.

`auto`

The width of the column is determined by other CSS properties, such as `column-count`.

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

|  |  |
| --- | --- |
| Initial value | `auto` |
| Applies to | Block containers except table wrapper boxes |
| Inherited | no |
| Computed value | the absolute length, zero or larger |
| Animation type | a length |

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

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

Examples
--------

### Setting column width in pixels

#### HTML


```html
<p class="content-box">
  Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy
  nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi
  enim ad minim veniam, quis nostrud exercitation ullamcorper suscipit lobortis
  nisl ut aliquip ex ea commodo consequat.
</p>
```


#### CSS


```css
.content-box {
  column-width: 100px;
}
```


#### Result

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

| Specification |
| --- |
| CSS Box Sizing Module Level 3 # column-sizing |
| CSS Multi-column Layout Module Level 1 # cw |

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

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

See also
--------

* Multiple-column Layout (Learn Layout)
* Basic Concepts of Multicol
pow()
=====

The **`pow()`** CSS function is an exponential function that returns the value of a base raised to the power of a number.

The `exp()` function is a special case of `pow()` where the value of the base is the mathematical constant e.

Syntax
------


```css
/\* A <number> value \*/
width: calc(10px * pow(5, 2)); /\* 10px \* 25 = 250px \*/
width: calc(10px * pow(5, 3)); /\* 10px \* 125 = 1250px \*/
width: calc(10px * pow(2, 10)); /\* 10px \* 1024 = 10240px \*/
```

### Parameters

The `pow(base, number)` function accepts two comma-separated values as its parameters.

`base`

A calculation that resolves to a `<number>`, representing the base.

`number`

A calculation that resolves to a `<number>`, representing the exponent.

### Return value

Returns a `<number>` representing basenumber, that is, `base` raised to the power of `number`.

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

<pow()> =   
  pow( <calc-sum> , <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
--------

### Scale headings by fixed ratio

The `pow()` function can be useful for strategies like CSS Modular Scale, which relates all the font-sizes on a page to each other by a fixed ratio.

#### HTML


```html
<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>
```


#### CSS


```css
h1 {
  font-size: calc(1rem * pow(1.5, 4));
}
h2 {
  font-size: calc(1rem * pow(1.5, 3));
}
h3 {
  font-size: calc(1rem * pow(1.5, 2));
}
h4 {
  font-size: calc(1rem * pow(1.5, 1));
}
h5 {
  font-size: calc(1rem * pow(1.5, 0));
}
h6 {
  font-size: calc(1rem * pow(1.5, -1));
}
```


#### Result

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

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

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

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

See also
--------

* `sqrt()`
* `hypot()`
* `exp()`
* `log()`
rotate
======

The **`rotate`** CSS property allows you to specify rotation transforms individually and independently of the `transform` property. This maps better to typical user interface usage, and saves having to remember the exact order of transform functions to specify in the `transform` property.

Try it
------

Syntax
------


```css
/\* Keyword values \*/
rotate: none;

/\* Angle value \*/
rotate: 90deg;
rotate: 0.25turn;
rotate: 1.57rad;

/\* x, y, or z axis name plus angle \*/
rotate: x 90deg;
rotate: y 0.25turn;
rotate: z 1.57rad;

/\* Vector plus angle value \*/
rotate: 1 1 1 90deg;

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

### Values

angle value

An `<angle>` specifying the angle to rotate the affected element through, around the Z axis. Equivalent to a `rotate()` (2D rotation) function.

x, y, or z axis name plus angle value

The name of the axis you want to rotate the affected element around (`"x"`, "`y`", or "`z"`), plus an `<angle>` specifying the angle to rotate the element through. Equivalent to a `rotateX()`/`rotateY()`/`rotateZ()` (3D rotation) function.

vector plus angle value

Three `<number>`s representing an origin-centered vector that defines a line around which you want to rotate the element, plus an `<angle>` specifying the angle to rotate the element through. Equivalent to a `rotate3d()` (3D rotation) function.

`none`

Specifies that no rotation should be applied.

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

|  |  |
| --- | --- |
| Initial value | `none` |
| Applies to | transformable elements |
| Inherited | no |
| Computed value | as specified |
| Animation type | a transform |
| Creates stacking context | yes |

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

rotate =   
  none                                    |  
  <angle>                                 |  
  [ x | y | z | <number>{3} ] && <angle>    
  
```

Examples
--------

### Rotating an element on hover

 The following example shows how to use the `rotate` property to rotate an element along various axes on hover.
 The first box rotates 90 degrees on the Z axis hover, the second rotates 180 degrees on the Y axis on hover, and the third rotates 360 degrees on hover around a vector defined by coordinates.

#### HTML


```html
<div class="box" id="box1">rotate Z</div>
<div class="box" id="box2">rotate Y</div>
<div class="box" id="box3">vector & angle</div>
```


#### CSS


```css
.box {
  display: inline-block;
  margin: 1em;
  min-width: 6.5em;
  line-height: 6.5em;
  text-align: center;
  transition: 1s ease-in-out;
  border: 0.25em dotted;
}

#box1:hover {
  rotate: 90deg;
}

#box2:hover {
  rotate: y 180deg;
}

#box3:hover {
  rotate: 1 2 1 360deg;
}
```


#### Result

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

| Specification |
| --- |
| CSS Transforms Module Level 2 # individual-transforms |

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

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

See also
--------

* `translate`
* `scale`
* `transform`

Note: `skew` is not an independent `transform` value