transform-box - CSS: Cascading Style Sheets

transform-box
=============

The **`transform-box`** CSS property defines the layout box to which the `transform`, individual transform properties `translate`,`scale`, and `rotate`, and `transform-origin` properties relate.

Syntax
------

```css
/\* Keyword values \*/
transform-box: content-box;
transform-box: border-box;
transform-box: fill-box;
transform-box: stroke-box;
transform-box: view-box;

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

The `transform-box` property is specified as one of the keyword values listed below.

### Values

`content-box`

The content box is used as the reference box. The reference box of a `<table>` is the border box of its table wrapper box, not its table box.

`border-box`

The border box is used as the reference box. The reference box of a `<table>` is the border box of its table wrapper box, not its table box.

`fill-box`

The object bounding box is used as the reference box. For elements with associated CSS layout box, acts as `content-box`.

`stroke-box`

The stroke bounding box is used as the reference box. For elements with associated CSS layout box, acts as `border-box`.

`view-box`

The nearest SVG viewport is used as the reference box. If a `viewBox` attribute is specified for the SVG viewport creating element, the reference box is positioned at the origin of the coordinate system established by the `viewBox` attribute, and the dimension of the reference box is set to the width and height values of the `viewBox` attribute. For elements with associated CSS layout box, acts as `border-box`.

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

|  |  |
| --- | --- |
| Initial value | `view-box` |
| Applies to | transformable elements |
| Inherited | no |
| Computed value | as specified |
| Animation type | discrete |

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

transform-box =
  content-box  |
  border-box   |
  fill-box     |
  stroke-box   |
  view-box

```

Examples
--------

### SVG transform-origin scoping

In this example we have an SVG:

```html
<svg id="svg" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 50 50">
  <g>
    <circle id="center" fill="red" r="1" transform="translate(25 25)" />
    <circle id="boxcenter" fill="blue" r=".5" transform="translate(15 15)" />
    <rect
 id="box"
 x="10"
 y="10"
 width="10"
 height="10"
 rx="1"
 ry="1"
 stroke="black"
 fill="none" />
  </g>
</svg>
```

In the CSS we have an animation that uses a transform to rotate the rectangle infinitely. `transform-box: fill-box` is used to make the `transform-origin` the center of the bounding box, so the rectangle spins in place. Without it, the transform origin is the center of the SVG canvas, and so you get a very different effect.

```css
svg {
  width: 80vh;
  border: 1px solid #d9d9d9;
  position: absolute;
  margin: auto;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}

#box {
  transform-origin: 50% 50%; /\* anything other than `0 0` to see the effect \*/
  transform-box: fill-box;
  animation: rotateBox 3s linear infinite;
}

@keyframes rotateBox {
  to {
    transform: rotate(360deg);
  }
}
```

Full credit for this example goes to Pogany; see this codepen for a live version.

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

| Specification |
| --- |
| CSS Transforms Module Level 1 # transform-box |

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

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

See also
--------

* Using CSS transforms
* `transform`, `transform-origin`
* Individual transform properties:
    + `translate`
    + `scale`
    + `rotate`


justify-self - CSS: Cascading Style Sheets

justify-self
============

The CSS **`justify-self`** property sets the way a box is justified inside its alignment container along the appropriate axis.

Try it
------

The effect of this property is dependent of the layout mode we are in:

* In block-level layouts, it aligns an item inside its containing block on the inline axis.
* For absolutely-positioned elements, it aligns an item inside its containing block on the inline axis, accounting for the offset values of top, left, bottom, and right.
* In table cell layouts, this property is *ignored*. Read more about alignment in block, absolute positioned and table layout.
* In flexbox layouts, this property is *ignored*. Read more about alignment in Flexbox.
* In grid layouts, it aligns an item inside its grid area on the inline axis. Read more about alignment in grid layouts.
Syntax
------

```css
/\* Basic keywords \*/
justify-self: auto;
justify-self: normal;
justify-self: stretch;

/\* Positional alignment \*/
justify-self: center; /\* Pack item around the center \*/
justify-self: start; /\* Pack item from the start \*/
justify-self: end; /\* Pack item from the end \*/
justify-self: flex-start; /\* Equivalent to 'start'. Note that justify-self is ignored in Flexbox layouts. \*/
justify-self: flex-end; /\* Equivalent to 'end'. Note that justify-self is ignored in Flexbox layouts. \*/
justify-self: self-start;
justify-self: self-end;
justify-self: left; /\* Pack item from the left \*/
justify-self: right; /\* Pack item from the right \*/

/\* Baseline alignment \*/
justify-self: baseline;
justify-self: first baseline;
justify-self: last baseline;

/\* Overflow alignment (for positional alignment only) \*/
justify-self: safe center;
justify-self: unsafe center;

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

This property can take one of three different forms:

* Basic keywords: one of the keyword values `normal`, `auto`, or `stretch`.
* Baseline alignment: the `baseline` keyword, plus optionally one of `first` or `last`.
* Positional alignment:
    + one of: `center`, `start`, `end`, `flex-start`, `flex-end`, `self-start`, `self-end`, `left`, or `right`.
    + Plus optionally `safe` or `unsafe`.
### Values

`auto`

The value used is the value of the `justify-items` property of the parents box, unless the box has no parent, or is absolutely positioned, in these cases, `auto` represents `normal`.

`normal`

The effect of this keyword is dependent of the layout mode we are in:

* In block-level layouts, the keyword is a synonym of `start`.
* In absolutely-positioned layouts, the keyword behaves like `start` on *replaced* absolutely-positioned boxes, and as `stretch` on *all other* absolutely-positioned boxes.
* In table cell layouts, this keyword has no meaning as this property is *ignored*.
* In flexbox layouts, this keyword has no meaning as this property is *ignored.*
* In grid layouts, this keyword leads to a behavior similar to the one of `stretch`, except for boxes with an aspect ratio or an intrinsic sizes where it behaves like `start`.

`start`

The item is packed flush to each other toward the start edge of the alignment container in the appropriate axis.

`end`

The item is packed flush to each other toward the end edge of the alignment container in the appropriate axis.

`flex-start`

For items that are not children of a flex container, this value is treated like `start`.

`flex-end`

For items that are not children of a flex container, this value is treated like `end`.

`self-start`

The item is packed flush to the edge of the alignment container of the start side of the item, in the appropriate axis.

`self-end`

The item is packed flush to the edge of the alignment container of the end side of the item, in the appropriate axis.

`center`

The items are packed flush to each other toward the center of the alignment container.

`left`

The items are packed flush to each other toward the left edge of the alignment container. If the property's axis is not parallel with the inline axis, this value behaves like `start`.

`right`

The items are packed flush to each other toward the right edge of the alignment container in the appropriate axis. If the property's axis is not parallel with the inline axis, this value behaves like `start`.

`baseline`, `first baseline`, `last baseline`

 Specifies participation in first- or last-baseline alignment: aligns the alignment baseline of the box's first or last baseline set with the corresponding baseline in the shared first or last baseline set of all the boxes in its baseline-sharing group.
 The fallback alignment for `first baseline` is `start`, the one for `last baseline` is `end`.

`stretch`

If the combined size of the items is less than the size of the alignment container, any `auto`-sized items have their size increased equally (not proportionally), while still respecting the constraints imposed by `max-height`/`max-width` (or equivalent functionality), so that the combined size exactly fills the alignment container.

`safe`

If the size of the item overflows the alignment container, the item is instead aligned as if the alignment mode were `start`.

`unsafe`

Regardless of the relative sizes of the item and alignment container, the given alignment value is honored.

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

|  |  |
| --- | --- |
| Initial value | `auto` |
| Applies to | block-level boxes, absolutely-positioned boxes, and grid items |
| Inherited | no |
| Computed value | as specified |
| Animation type | discrete |

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

justify-self =
  auto                                                |
  normal                                              |
  stretch                                             |
  <baseline-position>                                 |
  <overflow-position>? [ <self-position> | left | right ]  |
  anchor-center

<baseline-position> =
  [ first | last ]?  &&
  baseline

<overflow-position> =
  unsafe  |
  safe

<self-position> =
  center      |
  start       |
  end         |
  self-start  |
  self-end    |
  flex-start  |
  flex-end

```

Examples
--------

### Simple demonstration

In the following example we have a simple 2 x 2 grid layout. Initially the grid container is given a `justify-items` value of `stretch` — the default — which causes the grid items to stretch across the entire width of their cells.

The second, third, and fourth grid items are then given different values of `justify-self`, to show how these override the `justify-items` value. These values cause the grid items to span only as wide as their content width, and align in different positions across their cells.

#### HTML

```html
<article class="container">
  <span>First child</span>
  <span>Second child</span>
  <span>Third child</span>
  <span>Fourth child</span>
</article>
```

#### CSS

```css
html {
  font-family: helvetica, arial, sans-serif;
  letter-spacing: 1px;
}

article {
  background-color: red;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-auto-rows: 40px;
  grid-gap: 10px;
  margin: 20px;
  width: 300px;
  justify-items: stretch;
}

span:nth-child(2) {
  justify-self: start;
}

span:nth-child(3) {
  justify-self: center;
}

span:nth-child(4) {
  justify-self: end;
}

article span {
  background-color: black;
  color: white;
  margin: 1px;
  text-align: center;
}

article,
span {
  padding: 10px;
  border-radius: 7px;
}
```

#### Result

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

| Specification |
| --- |
| CSS Box Alignment Module Level 3 # justify-self-property |

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

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

See also
--------

* CSS Grid Guide: *Box alignment in CSS Grid layouts*
* CSS Box Alignment
* The `justify-items` property


table-layout - CSS: Cascading Style Sheets

table-layout
============

The **`table-layout`** CSS property sets the algorithm used to lay out `<table>` cells, rows, and columns.

Try it
------

Syntax
------

```css
/\* Keyword values \*/
table-layout: auto;
table-layout: fixed;

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

### Values

`auto`

The automatic table layout algorithm is used. The widths of the table and its cells are adjusted to fit the content. Most browsers use this algorithm by default.

`fixed`

The fixed table layout algorithm is used. When using this keyword, the table's width *needs to be specified explicitly* using the `width` property. If the value of the `width` property is set to `auto`or is not specified, the browser uses the automatic table layout algorithm, in which case the `fixed` value has no effect.
The fixed table layout algorithm is faster than the automatic layout algorithm because the horizontal layout of the table depends only on the table's width, the width of the columns, and borders or cell spacing. The horizontal layout doesn't depend on the contents of the cells because it depends only on explicitly set widths.

In the fixed table layout algorithm, the width of each column is determined as follows:

* A column element with explicit width sets the width for that column.
* Otherwise, a cell in the first row with explicit width determines the width for that column.
* Otherwise, the column gets the width from the shared remaining horizontal space.

With this algorithm the entire table can be rendered once the first table row has been downloaded and analyzed. This can speed up rendering time over the "automatic" layout method, but subsequent cell content might not fit in the column widths provided. Cells use the `overflow` property to determine whether to clip any overflowing content, but only if the table has a known width; otherwise, they won't overflow the cells.

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

|  |  |
| --- | --- |
| Initial value | `auto` |
| Applies to | `table` and `inline-table` elements |
| Inherited | no |
| Computed value | as specified |
| Animation type | discrete |

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

table-layout =
  auto   |
  fixed

```

Examples
--------

### Fixed-width tables with text-overflow

This example uses a fixed table layout, combined with the `width` property, to restrict the table's width. The `text-overflow` property is used to apply an ellipsis to words that are too long to fit. If the table layout were `auto`, the table would grow to accommodate its contents, despite the specified `width`.

#### HTML

```html
<table>
  <tr>
    <td>Ed</td>
    <td>Wood</td>
  </tr>
  <tr>
    <td>Albert</td>
    <td>Schweitzer</td>
  </tr>
  <tr>
    <td>Jane</td>
    <td>Fonda</td>
  </tr>
  <tr>
    <td>William</td>
    <td>Shakespeare</td>
  </tr>
</table>
```

#### CSS

```css
table {
  table-layout: fixed;
  width: 120px;
  border: 1px solid red;
}

td {
  border: 1px solid blue;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
```

#### Result

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

| Specification |
| --- |
| Cascading Style Sheets Level 2 Revision 2 (CSS 2.2) Specification # width-layout |

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

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

See also
--------

* `<table>`


padding-block - CSS: Cascading Style Sheets

padding-block
=============

The **`padding-block`** CSS shorthand property defines the logical block start and end padding of an element, which maps to physical padding properties 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:

* `padding-block-start`
* `padding-block-end`
Syntax
------

```css
/\* <length> values \*/
padding-block: 10px 20px; /\* An absolute length \*/
padding-block: 1em 2em; /\* relative to the text size \*/
padding-block: 10px; /\* sets both start and end values \*/

/\* <percentage> values \*/
padding-block: 5% 2%; /\* relative to the nearest block container's width \*/

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

The `padding-block` property may be specified with one or two values. If one value is given, it is used as the value for both `padding-block-start` and `padding-block-end`. If two values are given, the first is used for `padding-block-start` and the second for `padding-block-end`.

### Values

The `padding-block` property takes the same values as the `padding-left` property.

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

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

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

|  |  |
| --- | --- |
| Initial value | as each of the properties of the shorthand:* `padding-block-start`: `0`
* `padding-block-end`: `0`
 |
| Applies to | all elements, except `table-row-group`, `table-header-group`, `table-footer-group`, `table-row`, `table-column-group` and `table-column` |
| Inherited | no |
| Percentages | logical-width of containing block |
| Computed value | as each of the properties of the shorthand:* `padding-block-start`: as `<length>`
* `padding-block-end`: as `<length>`
 |
| Animation type | a length |

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

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

```

Examples
--------

### Setting block padding for 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-rl;
  padding-block: 20px 40px;
  background-color: #c8c800;
}
```

#### Result

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

| Specification |
| --- |
| CSS Logical Properties and Values Level 1 # propdef-padding-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: `padding-top`, `padding-right`, `padding-bottom`, and `padding-left`
* `writing-mode`, `direction`, `text-orientation`


CSS text - CSS: Cascading Style Sheets

CSS text
========

The **CSS text** module defines how to perform text manipulation, like line breaking, justification and alignment, white space handling, and text transformation.

Reference
---------

### Properties

* `hanging-punctuation`
* `hyphenate-limit-chars`
* `hyphens`
* `letter-spacing`
* `line-break`
* `overflow-wrap`
* `tab-size`
* `text-align`
* `text-align-last`
* `text-indent`
* `text-justify`
* `text-size-adjust`
* `text-transform`
* `text-wrap`
Experimental
* `white-space`
* `white-space-collapse`
Experimental
* `word-break`
* `word-spacing`
Specifications
--------------

| Specification |
| --- |
| CSS Logical Properties and Values Level 1  |
| CSS Text Module Level 3  |
| CSS Text Module Level 4  |


border-inline-start - CSS: Cascading Style Sheets

border-inline-start
===================

The **`border-inline-start`** CSS property is a shorthand property for setting the individual logical inline-start border property values in a single place in the style sheet.

Try it
------

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

This property is a shorthand for the following CSS properties:

* `border-inline-start-color`
* `border-inline-start-style`
* `border-inline-start-width`
Syntax
------

```css
border-inline-start: 1px;
border-inline-start: 2px dotted;
border-inline-start: medium dashed green;

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

The physical border to which `border-inline-start` maps depends on the element's writing mode, directionality, and text orientation. It corresponds to the `border-top`, `border-right`, `border-bottom`, or `border-left` property depending on the values defined for `writing-mode`, `direction`, and `text-orientation`.

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

### Values

The `border-inline-start` is specified with one or more of the following, in any order:

`<'border-width'>`

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

`<'border-style'>`

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

`<color>`

The color of the border.

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

|  |  |
| --- | --- |
| Initial value | as each of the properties of the shorthand:* `border-width`: as each of the properties of the shorthand:
    + `border-top-width`: `medium`
    + `border-right-width`: `medium`
    + `border-bottom-width`: `medium`
    + `border-left-width`: `medium`
* `border-style`: as each of the properties of the shorthand:
    + `border-top-style`: `none`
    + `border-right-style`: `none`
    + `border-bottom-style`: `none`
    + `border-left-style`: `none`
* `color`: `canvastext`
 |
| Applies to | all elements |
| Inherited | no |
| Computed value | as each of the properties of the shorthand:* `border-width`: as each of the properties of the shorthand:
    + `border-bottom-width`: the absolute length or `0` if `border-bottom-style` is `none` or `hidden`
    + `border-left-width`: the absolute length or `0` if `border-left-style` is `none` or `hidden`
    + `border-right-width`: the absolute length or `0` if `border-right-style` is `none` or `hidden`
    + `border-top-width`: the absolute length or `0` if `border-top-style` is `none` or `hidden`
* `border-style`: as each of the properties of the shorthand:
    + `border-bottom-style`: as specified
    + `border-left-style`: as specified
    + `border-right-style`: as specified
    + `border-top-style`: as specified
* `border-inline-start-color`: computed color
 |
| Animation type | as each of the properties of the shorthand:* `border-inline-start-color`: by computed value type
* `border-inline-start-style`: discrete
* `border-inline-start-width`: by computed value type
 |

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

border-inline-start =
  <line-width>  ||
  <line-style>  ||
  <color>

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

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

```

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-rl;
  border-inline-start: 5px dashed blue;
}
```

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

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

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


container - CSS: Cascading Style Sheets

container
=========

Baseline 2023
-------------

Newly availableSince February 2023, this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.

* Learn more
* See full compatibility
* Report feedback
The **container** shorthand CSS property establishes the element as a query container and specifies the name or name for the containment context used in a container query.

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

This property is a shorthand for the following CSS properties:

* `container-name`
* `container-type`
Syntax
------

```css
/\* <container-name> \*/
container: my-layout;

/\* <container-name> / <container-type> \*/
container: my-layout / size;

/\* Global Values \*/
container: inherit;
container: initial;
container: revert;
container: revert-layer;
container: unset;
```

### Values

`<container-name>`

 A case-sensitive name for the containment context.
 More details on the syntax are covered in the `container-name` property page.

`<container-type>`

 The type of containment context.
 More details on the syntax are covered in the `container-type` property page.

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

|  |  |
| --- | --- |
| Initial value | as each of the properties of the shorthand:* `container-name`: `none`
* `container-type`: `normal`
 |
| Applies to | all elements |
| Inherited | no |
| Percentages | as each of the properties of the shorthand:* `container-name`: no
* `container-type`: no
 |
| Computed value | as each of the properties of the shorthand:* `container-name`: `none` or an ordered list of identifiers
* `container-type`: as specified
 |
| Animation type | as each of the properties of the shorthand:* `container-name`: Not animatable
* `container-type`: a color
 |

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

container =
  <'container-name'> [ / <'container-type'> ]?

```

Examples
--------

### Establishing inline size containment

Given the following HTML example which is a card component with an image, a title, and some text:

```html
<div class="post">
  <div class="card">
    <h2>Card title</h2>
    <p>Card content</p>
  </div>
</div>
```

The explicit way to create a container context is to declare a `container-type` with an optional `container-name`:

```css
.post {
  container-type: inline-size;
  container-name: sidebar;
}
```

The `container` shorthand is intended to make this simpler to define in a single declaration:

```css
.post {
  container: sidebar / inline-size;
}
```

You can then target that container by name using the `@container` at-rule:

```css
@container sidebar (min-width: 400px) {
  /\* <stylesheet> \*/
}
```

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

| Specification |
| --- |
| CSS Containment Module Level 3 # container-shorthand |

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

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

See also
--------

* CSS container queries
* `@container` at-rule
* CSS `contain` property
* CSS `container-type` property
* CSS `container-name` property
* CSS `content-visibility` property


max-content - CSS: Cascading Style Sheets

max-content
===========

The `max-content` sizing keyword represents the intrinsic maximum width or height of the content. For text content this means that the content will not wrap at all even if it causes overflows.

Syntax
------

```css
/\* Used as a length \*/
width: max-content;
inline-size: max-content;
height: max-content;
block-size: max-content;

/\* used in grid tracks \*/
grid-template-columns: 200px 1fr max-content;
```

Examples
--------

### Using max-content for box sizing

#### HTML

```html
<div id="container">
  <div class="item">Item</div>
  <div class="item">
    Item with more text in it which will overflow the fixed width box.
  </div>
</div>
```

#### CSS

```css
#container {
  background-color: #8cffa0;
  padding: 10px;
  width: 200px;
}

.item {
  width: max-content;
  background-color: #8ca0ff;
  padding: 5px;
  margin-bottom: 1em;
}
```

#### Result

### Sizing grid columns with max-content

#### HTML

```html
<div id="container">
  <div>Item</div>
  <div>Item with more text in it.</div>
  <div>Flexible item</div>
</div>
```

#### CSS

```css
#container {
  display: grid;
  grid-template-columns: max-content max-content 1fr;
  grid-gap: 5px;
  box-sizing: border-box;
  height: 200px;
  width: 100%;
  background-color: #8cffa0;
  padding: 10px;
}

#container > div {
  background-color: #8ca0ff;
  padding: 5px;
}
```

#### Result

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

| Specification |
| --- |
| CSS Box Sizing Module Level 3 # valdef-width-max-content |

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

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

See also
--------

* Related sizing keywords: `min-content`, `fit-content`


animation-range-start - CSS: Cascading Style Sheets

animation-range-start
=====================

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

The **`animation-range-start`** CSS property is used to set the start of an animation's attachment range along its timeline, i.e. where along the timeline an animation will start.

The `animation-range-start` and `animation-range-end` properties can also be set using the `animation-range` shorthand property.

**Note:** `animation-range-start` is included in the `animation` shorthand as a reset-only value. This means that including `animation` resets a previously-declared `animation-range-start` value to `normal`, but a specific value cannot be set via `animation`. When creating CSS scroll-driven animations, you need to declare `animation-range-start` after declaring any `animation` shorthand for it to take effect.

Syntax
------

```css
/\* Keyword or length percentage value \*/
animation-range-start: normal;
animation-range-start: 20%;
animation-range-start: 100px;

/\* Named timeline range value \*/
animation-range-start: cover;
animation-range-start: contain;
animation-range-start: cover 20%;
animation-range-start: contain 100px;
```

### Values

Allowed values for `animation-range-start` are `normal`, a `<length-percentage>`, a `<timeline-range-name>`, or a `<timeline-range-name>` with a `<length-percentage>` following it. See `animation-range` for a detailed description of the available values.

Also check out the View Timeline Ranges Visualizer, which shows exactly what the different values mean in an easy visual format.

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

|  |  |
| --- | --- |
| Initial value | `normal` |
| Applies to | all elements |
| Inherited | no |
| Percentages | Relative to the specified named timeline range if specified, otherwise relative to the entire timeline |
| Computed value | A list where each item may be 'normal', a length percentage, or a timeline range name and a length percentage |
| Animation type | Not animatable |

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

animation-range-start =
  [ normal | <length-percentage> | <timeline-range-name> <length-percentage>? ]#

<length-percentage> =
  <length>      |
  <percentage>

```

Examples
--------

### Creating a named view progress timeline with range start

 A view progress timeline named `--subjectReveal` is defined using the `view-timeline` property on a subject element with a `class` of `animation`.
 This is then set as the timeline for the same element using `animation-timeline: --subjectReveal;`. The result is that the subject element animates as it moves upwards through the document as it is scrolled.

An `animation-range-start` declaration is also set to make the animation begin later than expected.

#### HTML

The HTML for the example is shown below.

```html
<div class="content">
  <h1>Content</h1>

  <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
    tempor incididunt ut labore et dolore magna aliqua. Risus quis varius quam
    quisque id. Et ligula ullamcorper malesuada proin libero nunc consequat
    interdum varius. Elit ullamcorper dignissim cras tincidunt lobortis feugiat
    vivamus at augue.
  </p>

  <p>
    Dolor sed viverra ipsum nunc aliquet. Sed sed risus pretium quam vulputate
    dignissim. Tortor aliquam nulla facilisi cras. A erat nam at lectus urna
    duis convallis convallis. Nibh ipsum consequat nisl vel pretium lectus.
    Sagittis aliquam malesuada bibendum arcu vitae elementum. Malesuada bibendum
    arcu vitae elementum curabitur vitae nunc sed velit.
  </p>

  <div class="subject animation"></div>

  <p>
    Adipiscing enim eu turpis egestas pretium aenean pharetra magna ac. Arcu
    cursus vitae congue mauris rhoncus aenean vel. Sit amet cursus sit amet
    dictum. Augue neque gravida in fermentum et. Gravida rutrum quisque non
    tellus orci ac auctor augue mauris. Risus quis varius quam quisque id diam
    vel quam elementum. Nibh praesent tristique magna sit amet purus gravida
    quis. Duis ultricies lacus sed turpis tincidunt id aliquet. In egestas erat
    imperdiet sed euismod nisi. Eget egestas purus viverra accumsan in nisl nisi
    scelerisque. Netus et malesuada fames ac.
  </p>
</div>
```

#### CSS

The `subject` element and its containing `content` element are styled minimally, and the text content is given some basic font settings:

```css
.subject {
  width: 300px;
  height: 200px;
  margin: 0 auto;
  background-color: deeppink;
}

.content {
  width: 75%;
  max-width: 800px;
  margin: 0 auto;
}

p,
h1 {
  font-family: Arial, Helvetica, sans-serif;
}

h1 {
  font-size: 3rem;
}

p {
  font-size: 1.5rem;
  line-height: 1.5;
}
```

The `<div>` with the class of `subject` is also given a class of `animation` — this is where `view-timeline` is set to define a named view progress timeline. It is also given an `animation-timeline` name with the same value to declare that this will be the element animated as the view progress timeline is progressed. We also give it an `animation-range-start` declaration to make the animation begin later than expected.

Last, an animation is specified on the element that animates its opacity and scale, causing it to fade in and size up as it moves up the scroller.

```css
.animation {
  view-timeline: --subjectReveal block;
  animation-timeline: --subjectReveal;

  animation-name: appear;
  animation-range-start: entry 25%;
  animation-fill-mode: both;
  animation-duration: 1ms; /\* Firefox requires this to apply the animation \*/
}

@keyframes appear {
  from {
    opacity: 0;
    transform: scaleX(0);
  }

  to {
    opacity: 1,
    transform: scaleX(1);
  }
}
```

#### Result

Scroll to see the subject element being animated.

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

| Specification |
| --- |
| Scroll-driven Animations # animation-range-start |

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

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

See also
--------

* `animation-timeline`
* `animation-range`, `animation-range-end`
* `scroll-timeline`, `scroll-timeline-axis`, `scroll-timeline-name`
* `timeline-scope`
* `view-timeline-inset`
* The JavaScript equivalent: The `rangeStart` property available in `Element.animate()` calls
* CSS scroll-driven animations


flex-direction - CSS: Cascading Style Sheets

flex-direction
==============

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

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

* Learn more
* See full compatibility
* Report feedback
The **`flex-direction`** CSS property sets how flex items are placed in the flex container defining the main axis and the direction (normal or reversed).

Try it
------

Note that the values `row` and `row-reverse` are affected by the directionality of the flex container. If its `dir` attribute is `ltr`, `row` represents the horizontal axis oriented from the left to the right, and `row-reverse` from the right to the left; if the `dir` attribute is `rtl`, `row` represents the axis oriented from the right to the left, and `row-reverse` from the left to the right.

Syntax
------

```css
/\* The direction text is laid out in a line \*/
flex-direction: row;

/\* Like <row>, but reversed \*/
flex-direction: row-reverse;

/\* The direction in which lines of text are stacked \*/
flex-direction: column;

/\* Like <column>, but reversed \*/
flex-direction: column-reverse;

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

### Values

The following values are accepted:

`row`

The flex container's main-axis is defined to be the same as the text direction. The **main-start** and **main-end** points are the same as the content direction.

`row-reverse`

Behaves the same as `row` but the **main-start** and **main-end** points are opposite to the content direction.

`column`

The flex container's main-axis is the same as the block-axis. The **main-start** and **main-end** points are the same as the **before** and **after** points of the writing-mode.

`column-reverse`

Behaves the same as `column` but the **main-start** and **main-end** are opposite to the content direction.

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

Using the `flex-direction` property with values of `row-reverse` or `column-reverse` will create a disconnect between the visual presentation of content and DOM order. This will adversely affect users experiencing low vision navigating with the aid of assistive technology such as a screen reader. If the visual (CSS) order is important, then screen reader users will not have access to the correct reading order.

* Flexbox & the keyboard navigation disconnect — Tink
* Source Order Matters | Adrian Roselli
* MDN Understanding WCAG, Guideline 1.3 explanations
* Understanding Success Criterion 1.3.2 | W3C Understanding WCAG 2.0
Formal definition
-----------------

|  |  |
| --- | --- |
| Initial value | `row` |
| Applies to | flex containers |
| Inherited | no |
| Computed value | as specified |
| Animation type | discrete |

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

flex-direction =
  row             |
  row-reverse     |
  column          |
  column-reverse

```

Examples
--------

### Reversing flex container columns and rows

#### HTML

```html
<h4>This is a Column-Reverse</h4>
<div id="col-rev" class="content">
  <div class="box red">A</div>
  <div class="box lightblue">B</div>
  <div class="box yellow">C</div>
</div>
<h4>This is a Row-Reverse</h4>
<div id="row-rev" class="content">
  <div class="box red">A</div>
  <div class="box lightblue">B</div>
  <div class="box yellow">C</div>
</div>
```

#### CSS

```css
.content {
  width: 200px;
  height: 200px;
  border: 1px solid #c3c3c3;
  display: flex;
}

.box {
  width: 50px;
  height: 50px;
}

#col-rev {
  flex-direction: column-reverse;
}

#row-rev {
  flex-direction: row-reverse;
}

.red {
  background-color: red;
}

.lightblue {
  background-color: lightblue;
}

.yellow {
  background-color: yellow;
}
```

#### Result

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

| Specification |
| --- |
| CSS Flexible Box Layout Module Level 1 # flex-direction-property |

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

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

See also
--------

* CSS `flex-flow` shorthand property for the CSS `flex-direction` and `flex-wrap` properties.
* CSS Flexbox Guide: *Basic Concepts of Flexbox*
* CSS Flexbox Guide: *Ordering flex items*


caret-color - CSS: Cascading Style Sheets

caret-color
===========

The **`caret-color`** CSS property sets the color of the **insertion caret**, the visible marker where the next character typed will be inserted. This is sometimes referred to as the **text input cursor**. The caret appears in elements such as `<input>` or those with the `contenteditable` attribute. The caret is typically a thin vertical line that flashes to help make it more noticeable. By default, it is black, but its color can be altered with this property.

Try it
------

Note that the insertion caret is only one type of caret. For example, many browsers have a "navigation caret," which acts similarly to an insertion caret but can be moved around in non-editable text. On the other hand, the mouse cursor image shown when hovering over text where the `cursor` property is `auto`, or when hovering over an element where the `cursor` property is `text` or `vertical-text`, though it sometimes looks like a caret, is not a caret (it's a cursor).

Syntax
------

```css
/\* Keyword values \*/
caret-color: auto;
caret-color: transparent;
caret-color: currentcolor;

/\* <color> values \*/
caret-color: red;
caret-color: #5729e9;
caret-color: rgb(0 200 0);
caret-color: hsl(228deg 4% 24% / 80%);

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

### Values

`auto`

The user agent selects an appropriate color for the caret. This is generally `currentcolor`, but the user agent may choose a different color to ensure good visibility and contrast with the surrounding content, taking into account the value of `currentcolor`, the background, shadows, and other factors.

**Note:** While user agents may use `currentcolor` (which is usually animatable) for the `auto` value, `auto` is not interpolated in transitions and animations.

`<color>`

The color of the caret.

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

|  |  |
| --- | --- |
| Initial value | `auto` |
| Applies to | all elements |
| Inherited | yes |
| Computed value | `auto` is computed as specified and `<color>` values are computed as defined for the `color` property. |
| Animation type | a color |

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

caret-color =
  auto     |
  <color>

```

Examples
--------

### Setting a custom caret color

#### HTML

```html
<input value="This field uses a default caret." size="64" />
<input class="custom" value="I have a custom caret color!" size="64" />
<p contenteditable class="custom">
  This paragraph can be edited, and its caret has a custom color as well!
</p>
```

#### CSS

```css
input {
  caret-color: auto;
  display: block;
  margin-bottom: 0.5em;
}

input.custom {
  caret-color: red;
}

p.custom {
  caret-color: green;
}
```

#### Result

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

| Specification |
| --- |
| CSS Basic User Interface Module Level 4 # caret-color |

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

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

See also
--------

* The `<input>` element
* The HTML `contenteditable` attribute, which can be used to make any element's text editable
* Applying color to HTML elements using CSS
* The `<color>` data type
* Other color-related properties: `color`, `background-color`, `border-color`, `outline-color`, `text-decoration-color`, `text-emphasis-color`, `text-shadow`, `caret-color`, and `column-rule-color`


::-moz-range-thumb - CSS: Cascading Style Sheets

::-moz-range-thumb
==================

**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-range-thumb`** CSS pseudo-element is a Mozilla extension that represents the *thumb* (i.e., virtual knob) of an `<input>` of `type="range"`. The user can move the thumb along the input's track to alter its numerical value.

**Note:** Using `::-moz-range-thumb` with anything but an `<input type="range">` doesn't match anything and has no effect.

Syntax
------

```css
::-moz-range-thumb {
  /\* ... \*/
}
```

Examples
--------

### HTML

```html
<input type="range" min="0" max="100" step="5" value="50" />
```

### CSS

```css
input[type="range"]::-moz-range-thumb {
  background-color: green;
}
```

### Result

A progress bar using this style might look something like this:

![The thumb of the 'input type=right' styled in green](/en-US/docs/Web/CSS/::-moz-range-thumb/screen_shot_2015-12-04_at_13.30.08.png)

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

* The pseudo-elements used by Gecko to style other parts of a range input:
    + `::-moz-range-track` represents the groove in which the thumb slides.
    + `::-moz-range-progress` represents the lower portion of the track.
* Similar pseudo-elements used by other browsers:
    + `::-webkit-slider-thumb`, pseudo-element supported by WebKit and Blink (Safari, Chrome, and Opera)
* CSS-Tricks: Styling Cross-Browser Compatible Range Inputs with CSS
* QuirksMode: Styling and scripting sliders


CSS shapes - CSS: Cascading Style Sheets

CSS shapes
==========

The **CSS shapes** module describes geometric shapes that can be in CSS. For the Level 1 specification, CSS shapes can be applied to floating elements. The specification defines a number of different ways to define a shape on a floated element, causing wrapping lines to wrap round the shape rather than following the rectangle of the element's box.

Basic example
-------------

The example below shows an image that has been floated left, and the `shape-outside` property applied with a value of `circle(50%)`. This creates a circle shape, and the content wrapping the float now wraps around that shape. This changes the length of the wrapping text's line boxes.

Reference
---------

### Properties

* `shape-image-threshold`
* `shape-margin`
* `shape-outside`
### Data types

* `<basic-shape>`
Guides
------

* Overview of shapes
* Shapes from box values
* Basic shapes
* Shapes from images
Specifications
--------------

| Specification |
| --- |
| CSS Shapes Module Level 1  |

See also
--------

* CSS Shapes resources
* CSS Shapes 101
* Creating non-rectangular layouts with CSS Shapes
* How to use CSS Shapes in your web design
* How to get started with CSS Shapes
* What I learned in one weekend with CSS Shapes
* CSS vs. SVG: Shapes and arbitrarily-shaped UI components
* Edit shape paths in CSS — Firefox Developer Tools


scroll-padding-block - CSS: Cascading Style Sheets

scroll-padding-block
====================

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

Try it
------

The scroll-padding properties define offsets for 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.

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

This property is a shorthand for the following CSS properties:

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

```css
/\* Keyword values \*/
scroll-padding-block: auto;

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

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

### Values

`<length-percentage>`

An inwards offset from the corresponding 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 | as each of the properties of the shorthand:* `scroll-padding-block-start`: `auto`
* `scroll-padding-block-end`: `auto`
 |
| Applies to | scroll containers |
| Inherited | no |
| Percentages | relative to the scroll container's scrollport |
| Computed value | as each of the properties of the shorthand:* `scroll-padding-block-start`: as specified
* `scroll-padding-block-end`: as specified
 |
| Animation type | by computed value type |

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

scroll-padding-block =
  [ auto | <length-percentage [0,∞]> ]{1,2}

<length-percentage> =
  <length>      |
  <percentage>

```

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

| Specification |
| --- |
| CSS Scroll Snap Module Level 1 # propdef-scroll-padding-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


padding-inline - CSS: Cascading Style Sheets

padding-inline
==============

The **`padding-inline`** CSS shorthand property defines the logical inline start and end padding of an element, which maps to physical padding properties 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:

* `padding-inline-end`
* `padding-inline-start`
Syntax
------

```css
/\* <length> values \*/
padding-inline: 10px 20px; /\* An absolute length \*/
padding-inline: 1em 2em; /\* relative to the text size \*/
padding-inline: 10px; /\* sets both start and end values \*/

/\* <percentage> values \*/
padding-inline: 5% 2%; /\* relative to the nearest block container's width \*/

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

The `padding-inline` property may be specified with one or two values. If one value is given, it is used as the value for both `padding-inline-start` and `padding-inline-end`. If two values are given, the first is used for `padding-inline-start` and the second for `padding-inline-end`.

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

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

Values for this property correspond to the `padding-top` and `padding-bottom`, or `padding-right`, and `padding-left` property depending on the values defined for `writing-mode`, `direction`, and `text-orientation`.

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

|  |  |
| --- | --- |
| Initial value | as each of the properties of the shorthand:* `padding-inline-start`: `0`
* `padding-inline-end`: `0`
 |
| Applies to | all elements, except `table-row-group`, `table-header-group`, `table-footer-group`, `table-row`, `table-column-group` and `table-column` |
| Inherited | no |
| Percentages | logical-width of containing block |
| Computed value | as each of the properties of the shorthand:* `padding-inline-start`: as `<length>`
* `padding-inline-end`: as `<length>`
 |
| Animation type | a length |

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

padding-inline =
  <'padding-top'>{1,2}

```

Examples
--------

### Setting inline padding for 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-rl;
  padding-inline: 20px 40px;
  background-color: #c8c800;
}
```

#### Result

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

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

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: `padding-top`, `padding-right`, `padding-bottom`, and `padding-left`
* `writing-mode`, `direction`, `text-orientation`


mask-position - CSS: Cascading Style Sheets

mask-position
=============

The **`mask-position`** CSS property sets the initial position, relative to the mask position layer set by `mask-origin`, for each defined mask image.

Syntax
------

```css
/\* Keyword values \*/
mask-position: top;
mask-position: bottom;
mask-position: left;
mask-position: right;
mask-position: center;

/\* <position> values \*/
mask-position: 25% 75%;
mask-position: 0px 0px;
mask-position: 10% 8em;

/\* Multiple values \*/
mask-position: top right;
mask-position:
  1rem 1rem,
  center;

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

One or more `<position>` values, separated by commas.

### Values

`<position>`

One to four values representing a 2D position regarding the edges of the element's box. Relative or absolute offsets can be given. Note that the position can be set outside of the element's box.

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

|  |  |
| --- | --- |
| Initial value | `center` |
| Applies to | all elements; In SVG, it applies to container elements excluding the `<defs>` element and all graphics elements |
| Inherited | no |
| Percentages | refer to size of mask painting area minus size of mask layer image (see the text for `background-position`) |
| Computed value | Consists of two keywords representing the origin and two offsets from that origin, each given as an absolute length (if given a <length>), otherwise as a percentage. |
| Animation type | a repeatable list |

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

mask-position =
  <position>#

<position> =
  [ left | center | right | top | bottom | <length-percentage> ]  |
  [ left | center | right ] && [ top | center | bottom ]  |
  [ left | center | right | <length-percentage> ] [ top | center | bottom | <length-percentage> ]  |
  [ [ left | right ] <length-percentage> ] && [ [ top | bottom ] <length-percentage> ]

<length-percentage> =
  <length>      |
  <percentage>

```

Examples
--------

### Setting mask position

 Change the `mask-position` value to any of the allowed values detailed above.
 If viewing the example in a Chromium-based browser change the value of `-webkit-mask-position`.

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

| Specification |
| --- |
| CSS Masking Module Level 1 # the-mask-position |

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

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

See also
--------

* Clipping and Masking in CSS


scroll-margin-block-end - CSS: Cascading Style Sheets

scroll-margin-block-end
=======================

The `scroll-margin-block-end` property defines the margin of the scroll snap area at the end of the block dimension 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.

Try it
------

Syntax
------

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

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

### Values

`<length>`

An outset from the block end edge of the scroll container.

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

|  |  |
| --- | --- |
| Initial value | `0` |
| Applies to | all elements |
| Inherited | no |
| Computed value | as specified |
| Animation type | by computed value type |

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

scroll-margin-block-end =
  <length>

```

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

| Specification |
| --- |
| CSS Scroll Snap Module Level 1 # margin-longhands-logical |

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


scroll-margin-right - CSS: Cascading Style Sheets

scroll-margin-right
===================

The `scroll-margin-right` property defines the right margin of 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.

Try it
------

Syntax
------

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

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

### Values

`<length>`

An outset from the right edge of the scroll container.

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

|  |  |
| --- | --- |
| Initial value | `0` |
| Applies to | all elements |
| Inherited | no |
| Computed value | as specified |
| Animation type | by computed value type |

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

scroll-margin-right =
  <length>

```

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

| Specification |
| --- |
| CSS Scroll Snap Module Level 1 # margin-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


line-break - CSS: Cascading Style Sheets

line-break
==========

The **`line-break`** CSS property sets how to break lines of Chinese, Japanese, or Korean (CJK) text when working with punctuation and symbols.

Try it
------

Syntax
------

```css
/\* Keyword values \*/
line-break: auto;
line-break: loose;
line-break: normal;
line-break: strict;
line-break: anywhere;

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

### Values

`auto`

Break text using the default line break rule.

`loose`

Break text using the least restrictive line break rule. Typically used for short lines, such as in newspapers.

`normal`

Break text using the most common line break rule.

`strict`

Break text using the most stringent line break rule.

`anywhere`

There is a soft wrap opportunity around every typographic character unit, including around any punctuation character or preserved white spaces, or in the middle of words, disregarding any prohibition against line breaks, even those introduced by characters with the GL, WJ, or ZWJ character class or mandated by the `word-break` property. The different wrapping opportunities must not be prioritized. Hyphenation is not applied.

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

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

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

line-break =
  auto      |
  loose     |
  normal    |
  strict    |
  anywhere

```

Examples
--------

### Setting text wrapping

See whether the text is wrapped before "々", "ぁ" and "。".

#### HTML

```html
<div lang="ja">
  <p class="wrapbox auto">
    auto:<br />そこは湖のほとりで木々が輝いていた。<br />その景色に、美しいなぁと思わずつぶやいた。
  </p>
  <p class="wrapbox loose">
    loose:<br />そこは湖のほとりで木々が輝いていた。<br />その景色に、美しいなぁと思わずつぶやいた。
  </p>
  <p class="wrapbox normal">
    normal:<br />そこは湖のほとりで木々が輝いていた。<br />その景色に、美しいなぁと思わずつぶやいた。
  </p>
  <p class="wrapbox strict">
    strict:<br />そこは湖のほとりで木々が輝いていた。<br />その景色に、美しいなぁと思わずつぶやいた。
  </p>
  <p class="wrapbox anywhere">
    anywhere:<br />そこは湖のほとりで木々が輝いていた。<br />その景色に、美しいなぁと思わずつぶやいた。
  </p>
</div>
```

#### CSS

```css
.wrapbox {
  width: 10em;
  margin: 0.5em;
  white-space: normal;
  vertical-align: top;
  display: inline-block;
}
.auto {
  line-break: auto;
}
.loose {
  line-break: loose;
}
.normal {
  line-break: normal;
}
.strict {
  line-break: strict;
}
.anywhere {
  line-break: anywhere;
}
```

#### Result

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

| Specification |
| --- |
| CSS Text Module Level 3 # line-break-property |

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

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

* CSS and International text


:nth-last-child() - CSS: Cascading Style Sheets

:nth-last-child()
=================

The **`:nth-last-child()`** CSS pseudo-class matches elements based on their position among a group of siblings, counting from the end.

Try it
------

Syntax
------

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

```css
:nth-last-child(<nth> [of <complex-selector-list>]?) {
  /\* ... \*/
}
```

### Keyword values

`odd`

Represents elements whose numeric position in a series of siblings is odd: 1, 3, 5, etc., counting from the end.

`even`

Represents elements whose numeric position in a series of siblings is even: 2, 4, 6, etc., counting from the end.

### Functional notation

`<An+B>`

Represents elements whose numeric position in a series of siblings matches the pattern `An+B`, for every positive integer or zero value of `n`, where:

* `A` is an integer step size,
* `B` is an integer offset,
* `n` is all nonnegative integers, starting from 0.

It can be read as the `An+B`-th element of a list. The index of the first element, counting from the end, is `1`. The `A` and `B` must both have `<integer>` values.

### The `of <selector>` syntax

By passing a selector argument, we can select the **nth-last** element that matches that selector. For example, the following selector matches the last three *important* list items, which are assigned with `class="important"`.

```css
:nth-last-child(-n + 3 of li.important) {
}
```

**Note:** This is different from moving the selector outside of the function, like:

```css
li.important: nth-last-child(-n + 3);
```

This selector applies a style to list items if they are also within the last three children.

Examples
--------

### Example selectors

`tr:nth-last-child(odd)` or `tr:nth-last-child(2n+1)`

Represents the odd rows of an HTML table: 1, 3, 5, etc., counting from the end.

`tr:nth-last-child(even)` or `tr:nth-last-child(2n)`

Represents the even rows of an HTML table: 2, 4, 6, etc., counting from the end.

`:nth-last-child(7)`

Represents the seventh element, counting from the end.

`:nth-last-child(5n)`

Represents elements 5, 10, 15, etc., counting from the end.

`:nth-last-child(3n+4)`

Represents elements 4, 7, 10, 13, etc., counting from the end.

`:nth-last-child(-n+3)`

Represents the last three elements among a group of siblings.

`p:nth-last-child(n)` or `p:nth-last-child(n+1)`

Represents every `<p>` element among a group of siblings. This is the same as a simple `p` selector. (Since `n` starts at zero, while the last element begins at one, `n` and `n+1` will both select the same elements.)

`p:nth-last-child(1)` or `p:nth-last-child(0n+1)`

Represents every `<p>` that is the first element among a group of siblings, counting from the end. This is the same as the `:last-child` selector.

### Table example

#### HTML

```html
<table>
  <tbody>
    <tr>
      <td>First line</td>
    </tr>
    <tr>
      <td>Second line</td>
    </tr>
    <tr>
      <td>Third line</td>
    </tr>
    <tr>
      <td>Fourth line</td>
    </tr>
    <tr>
      <td>Fifth line</td>
    </tr>
  </tbody>
</table>
```

#### CSS

```css
table {
  border: 1px solid blue;
}

/\* Selects the last three elements \*/
tr:nth-last-child(-n + 3) {
  background-color: pink;
}

/\* Selects every element starting from the second to last item \*/
tr:nth-last-child(n + 2) {
  color: blue;
}

/\* Select only the last second element \*/
tr:nth-last-child(2) {
  font-weight: 600;
}
```

#### Result

### Quantity query

A *quantity query* styles elements depending on how many of them there are. In this example, list items turn red when there are at least three of them in a given list. This is accomplished by combining the capabilities of the `nth-last-child` pseudo-class and the subsequent-sibling combinator.

#### HTML

```html
<h4>A list of four items (styled):</h4>
<ol>
  <li>One</li>
  <li>Two</li>
  <li>Three</li>
  <li>Four</li>
</ol>

<h4>A list of two items (unstyled):</h4>
<ol>
  <li>One</li>
  <li>Two</li>
</ol>
```

#### CSS

```css
/\* If there are at least three list items,
 style them all \*/
li:nth-last-child(n + 3),
li:nth-last-child(3) ~ li {
  color: red;
}
```

#### Result

### `of <selector>` syntax example

In this example, there is an unordered list of names. Some items have a `noted` class applied and are then highlighted with a thick bottom border.

#### HTML

```html
<ul>
  <li class="noted">Diego</li>
  <li>Shilpa</li>
  <li class="noted">Caterina</li>
  <li>Jayla</li>
  <li>Tyrone</li>
  <li>Ricardo</li>
  <li class="noted">Gila</li>
  <li>Sienna</li>
  <li>Titilayo</li>
  <li class="noted">Lexi</li>
  <li>Aylin</li>
  <li>Leo</li>
  <li>Leyla</li>
  <li class="noted">Bruce</li>
  <li>Aisha</li>
  <li>Veronica</li>
  <li class="noted">Kyouko</li>
  <li>Shireen</li>
  <li>Tanya</li>
  <li class="noted">Marlene</li>
</ul>
```

#### CSS

```css
\* {
  font-family: sans-serif;
}

ul {
  display: flex;
  flex-wrap: wrap;
  list-style: none;
  font-size: 1.2rem;
  padding-left: 0;
}

li {
  margin: 0.125rem;
  padding: 0.25rem;
  border: 1px solid tomato;
}

.noted {
  border-bottom: 5px solid tomato;
}
```

In the following CSS we are targeting the **odd** list items that are marked with `class="noted"`.

```css
li:nth-last-child(odd of .noted) {
  background-color: tomato;
  border-bottom-color: seagreen;
}
```

#### Result

Items with `class="noted"` have a think bottom border and items 1, 7, 14, and 20 have a solid background as they are the *odd* list items with `class="noted"`.

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

| Specification |
| --- |
| Selectors Level 4 # nth-last-child-pseudo |

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

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

See also
--------

* `:nth-child`
* `:nth-last-of-type`
* Quantity Queries for CSS


CSS filter effects - CSS: Cascading Style Sheets

CSS filter effects
==================

The properties in the **CSS filter effects** module let you define a way of processing an element's rendering before the element is displayed in the document. Examples of such effects include blurring and changing the intensity of the color of an element.

### Filter effects in action

Play with the various sliders to apply filter effects to the image below:

To see the code for this filter effects sample, view the source on GitHub.

### Properties

* `backdrop-filter`
* `filter`
### Functions

* `blur()`
* `brightness()`
* `contrast()`
* `drop-shadow()`
* `grayscale()`
* `hue-rotate()`
* `invert()`
* `opacity()`
* `saturate()`
* `sepia()`
Guides
------

Using CSS filter effects

Overview of the concepts surrounding CSS filter effects, including properties, filter functions, and SVG filters, with an explanation of filter values, source order, and value interactions.

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

* `<image>` data type
* `<filter-function>` data type
* `background-image` CSS property
* `background-blend-mode` CSS property
* `mix-blend-mode` CSS property
* interpolation glossary term
* `color-interpolation-filters` SVG property
Specifications
--------------

| Specification |
| --- |
| Filter Effects Module Level 2  |
| Filter Effects Module Level 1  |

See also
--------

* Properties in the CSS compositing and blending module enable blending an element's background layers together and blending an element with its container
* The SVG `<filter>` element and the SVG filter primitives: `<feSpotLight>`, `<feBlend>`, `<feColorMatrix>`, `<feComponentTransfer>`, `<feComposite>`, `<feConvolveMatrix>`, `<feDiffuseLighting>`, `<feDisplacementMap>`, `<feDropShadow>`, `<feFlood>`, `<feGaussianBlur>`, `<feImage>`, `<feMerge>`, `<feMorphology>`, `<feOffset>`, `<feSpecularLighting>`, `<feTile>`, `<feTurbulence>`


CSS display - CSS: Cascading Style Sheets

CSS display
===========

The **CSS display** module defines how the CSS formatting box tree is generated from the document element tree and defines properties controlling it.

Reference
---------

### Properties

* `display`
### Data types

* `<display-outside>`
* `<display-inside>`
* `<display-listitem>`
* `<display-box>`
* `<display-internal>`
* `<display-legacy>`
Guides
------

Using the multi-keyword syntax with CSS display

Describes the multi-keyword syntax and compares this syntax with legacy single-keyword values.

### Flow layout (display: block, display: inline)

* Block and inline layout in normal flow
* Flow layout and overflow
* Flow layout and writing modes
* Introduction to formatting contexts
* In flow and out of flow
### Flexible box layout

* Basic concepts of flexbox
* Aligning items in a flex container
* Controlling ratios of flex items along the main axis
* Mastering wrapping of flex items
* Ordering flex items
* Relationship of flexbox to other layout methods
* Typical use cases of flexbox
### Grid layout

* Basic concepts of grid layout
* Relationship of grid layout to other layout methods
* Line-based placement
* Grid template areas
* Layout using named grid lines
* Auto-placement in grid layout
* Box alignment in grid layout
* Grids, logical values and writing modes
* CSS Grid Layout and accessibility
* CSS Grid Layout and progressive enhancement
* Realizing common layouts using grids
Specifications
--------------

| Specification |
| --- |
| CSS Display Module Level 3 # the-display-properties |

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

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

See also
--------

* CSS flexible box layout module
* CSS grid layout module


object-fit - CSS: Cascading Style Sheets

object-fit
==========

The **`object-fit`** CSS property sets how the content of a replaced element, such as an `<img>` or `<video>`, should be resized to fit its container.

You can alter the alignment of the replaced element's content object within the element's box using the `object-position` property.

Try it
------

Syntax
------

```css
object-fit: contain;
object-fit: cover;
object-fit: fill;
object-fit: none;
object-fit: scale-down;

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

The `object-fit` property is specified as a single keyword chosen from the list of values below.

### Values

`contain`

The replaced content is scaled to maintain its aspect ratio while fitting within the element's content box. The entire object is made to fill the box, while preserving its aspect ratio, so the object will be "letterboxed" if its aspect ratio does not match the aspect ratio of the box.

`cover`

The replaced content is sized to maintain its aspect ratio while filling the element's entire content box. If the object's aspect ratio does not match the aspect ratio of its box, then the object will be clipped to fit.

`fill`

The replaced content is sized to fill the element's content box. The entire object will completely fill the box. If the object's aspect ratio does not match the aspect ratio of its box, then the object will be stretched to fit.

`none`

The replaced content is not resized.

`scale-down`

The content is sized as if `none` or `contain` were specified, whichever would result in a smaller concrete object size.

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

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

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

object-fit =
  fill        |
  contain     |
  cover       |
  none        |
  scale-down

```

Examples
--------

### Setting object-fit for an image

#### HTML

```html
<section>
  <h2>object-fit: fill</h2>
  <img class="fill" src="mdn\_logo\_only\_color.png" alt="MDN Logo" />

  <img class="fill narrow" src="mdn\_logo\_only\_color.png" alt="MDN Logo" />

  <h2>object-fit: contain</h2>
  <img class="contain" src="mdn\_logo\_only\_color.png" alt="MDN Logo" />

  <img class="contain narrow" src="mdn\_logo\_only\_color.png" alt="MDN Logo" />

  <h2>object-fit: cover</h2>
  <img class="cover" src="mdn\_logo\_only\_color.png" alt="MDN Logo" />

  <img class="cover narrow" src="mdn\_logo\_only\_color.png" alt="MDN Logo" />

  <h2>object-fit: none</h2>
  <img class="none" src="mdn\_logo\_only\_color.png" alt="MDN Logo" />

  <img class="none narrow" src="mdn\_logo\_only\_color.png" alt="MDN Logo" />

  <h2>object-fit: scale-down</h2>
  <img class="scale-down" src="mdn\_logo\_only\_color.png" alt="MDN Logo" />

  <img class="scale-down narrow" src="mdn\_logo\_only\_color.png" alt="MDN Logo" />
</section>
```

#### CSS

```css
h2 {
  font-family:
    Courier New,
    monospace;
  font-size: 1em;
  margin: 1em 0 0.3em;
}

img {
  width: 150px;
  height: 100px;
  border: 1px solid #000;
  margin: 10px 0;
}

.narrow {
  width: 100px;
  height: 150px;
}

.fill {
  object-fit: fill;
}

.contain {
  object-fit: contain;
}

.cover {
  object-fit: cover;
}

.none {
  object-fit: none;
}

.scale-down {
  object-fit: scale-down;
}
```

#### Result

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

| Specification |
| --- |
| CSS Images Module Level 3 # the-object-fit |

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

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

See also
--------

* Other image-related CSS properties: `object-position`, `image-orientation`, `image-rendering`, `image-resolution`.
* `background-size`


scroll-margin-block-start - CSS: Cascading Style Sheets

scroll-margin-block-start
=========================

The `scroll-margin-block-start` property defines the margin of the scroll snap area at the start of the block dimension 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.

Try it
------

Syntax
------

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

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

### Values

`<length>`

An outset from the block start edge of the scroll container.

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

|  |  |
| --- | --- |
| Initial value | `0` |
| Applies to | all elements |
| Inherited | no |
| Computed value | as specified |
| Animation type | by computed value type |

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

scroll-margin-block-start =
  <length>

```

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

| Specification |
| --- |
| CSS Scroll Snap Module Level 1 # margin-longhands-logical |

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


contain-intrinsic-inline-size - CSS: Cascading Style Sheets

contain-intrinsic-inline-size
=============================

The **`contain-intrinsic-inline-size`** CSS logical property defines the inline-size of an element that a browser can use for layout when the element is subject to size containment.

 Inline-size is the size of the element in the dimension parallel to the flow of text within a line.
 In a horizontal writing mode like standard English, inline size is the horizontal dimension (width); for a vertical writing mode, inline size is the vertical dimension.

Syntax
------

```css
/\* Keyword values \*/
contain-intrinsic-inline-size: none;

/\* <length> values \*/
contain-intrinsic-inline-size: 1000px;
contain-intrinsic-inline-size: 10rem;

/\* auto <length> \*/
contain-intrinsic-inline-size: auto 300px;

/\* Global values \*/
contain-intrinsic-inline-size: inherit;
contain-intrinsic-inline-size: initial;
contain-intrinsic-inline-size: revert;
contain-intrinsic-inline-size: revert-layer;
contain-intrinsic-inline-size: unset;
```

### Values

The following values can be specified for the intrinsic inline size of an element:

`none`

The element has no intrinsic inline-size.

`<length>`

The element has the specified inline-size (`<length>`).

`auto <length>`

 When the element is in size containment and skipping its contents (for example, when it is offscreen and `content-visibility: auto` is set) the inline size is remembered from the actual size of the element when it was last able to render its child elements.
 If the element has never rendered its child elements and hence has no remembered value for the normally rendered element size, or if it is not skipping its contents, the inline size is the specified `<length>`.

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

The property is commonly applied alongside elements that can trigger size containment, such as `contain: size` and `content-visibility`.

 Size containment allows a user agent to lay out an element as though it had a fixed size, preventing unnecessary reflows by avoiding the re-rendering of child elements to determine the actual size (thereby improving user experience).
 By default, size containment treats elements as though they had no contents, and may collapse the layout in the same way as if the contents had no width or height.
 The `contain-intrinsic-inline-size` property allows authors to specify an appropriate value to be used as the inline-size for layout.

 The `auto <length>` value allows the inline-size of the element to be stored if the element is ever "normally rendered" (with its child elements), and then used instead of the specified value when the element is skipping its contents.
 This allows offscreen elements with `content-visibility: auto` to benefit from size containment without developers having to be as precise in their estimates of element size.
 The remembered value is not used if the child elements are being rendered (if size containment is enabled, the `<length>` will be used).

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

|  |  |
| --- | --- |
| Initial value | `none` |
| Applies to | elements for which size containment can apply |
| Inherited | no |
| Computed value | as specified, with <length>s values computed |
| Animation type | by computed value type |

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

contain-intrinsic-inline-size =
  auto? [ none | <length> ]

```

Examples
--------

### Setting the intrinsic inline size

The HTML below defines an element "contained\_element" that will be subject to size constraint, and which contains a child element.

```html
<div id="contained\_element">
  <div class="child\_element"></div>
</div>
```

 The CSS below sets the `content-visibility` of `contained_element` to `auto`, so if the element is hidden it will be size constrained.
 The intrinsic block size and inline size that are used when it is size constrained are set at the same time using `contain-intrinsic-block-size` and `contain-intrinsic-inline-size`, respectively.

```css
#contained\_element {
  border: 2px solid green;
  inline-size: 151px;
  content-visibility: auto;
  contain-intrinsic-inline-size: 152px;
  contain-intrinsic-block-size: 52px;
}
.child\_element {
  border: 1px solid red;
  background: blue;
  block-size: 50px;
  inline-size: 150px;
}
```

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

| Specification |
| --- |
| CSS Box Sizing Module Level 4 # propdef-contain-intrinsic-inline-size |

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

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

See also
--------

* content-visibility: the new CSS property that boosts your rendering performance (web.dev)
* `contain-intrinsic-block-size`
* `contain-intrinsic-size`
* `contain-intrinsic-width`
* `contain-intrinsic-height`


:not() - CSS: Cascading Style Sheets

:not()
======

The **`:not()`** CSS pseudo-class represents elements that do not match a list of selectors. Since it prevents specific items from being selected, it is known as the *negation pseudo-class*.

Try it
------

The `:not()` pseudo-class has a number of quirks, tricks, and unexpected results that you should be aware of before using it.

Syntax
------

The `:not()` pseudo-class requires a comma-separated list of one or more selectors as its argument. The list must not contain another negation selector or a pseudo-element.

```css
:not(<complex-selector-list>) {
  /\* ... \*/
}
```

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

There are several unusual effects and outcomes when using `:not()` that you should keep in mind when using it:

* Useless selectors can be written using this pseudo-class. For example, `:not(*)` matches any element which is not an element, which is obviously nonsense, so the accompanying rule will never be applied.
* This pseudo-class can increase the specificity of a rule. For example, `#foo:not(#bar)` will match the same element as the simpler `#foo`, but has the higher specificity of two `id` selectors.
* The specificity of the `:not()` pseudo-class is replaced by the specificity of the most specific selector in its comma-separated argument of selectors; providing the same specificity as if it had been written `:not(:is(argument))`.
* `:not(.foo)` will match anything that isn't `.foo`, *including `<html>` and `<body>`.*
* This selector will match everything that is "not an X". This may be surprising when used with descendant combinators, since there are multiple paths to select a target element. For instance, `body :not(table) a` will still apply to links inside a `<table>`, since `<tr>`, `<tbody>`, `<th>`, `<td>`, `<caption>`, etc. can all match the `:not(table)` part of the selector.
* You can negate several selectors at the same time. Example: `:not(.foo, .bar)` is equivalent to `:not(.foo):not(.bar)`.
* If any selector passed to the `:not()` pseudo-class is invalid or not supported by the browser, the whole rule will be invalidated. The effective way to overcome this behavior is to use `:is()` pseudo-class, which accepts a forgiving selector list. For example `:not(.foo, :invalid-pseudo-class)` will invalidate a whole rule, but `:not(:is(.foo, :invalid-pseudo-class))` will match any (*including `<html>` and `<body>`*) element that isn't `.foo`.
Examples
--------

### Using :not() with valid selectors

This example shows some simple cases of using `:not()`.

#### HTML

```html
<p>I am a paragraph.</p>
<p class="fancy">I am so very fancy!</p>
<div>I am NOT a paragraph.</div>
<h2>
  <span class="foo">foo inside h2</span>
  <span class="bar">bar inside h2</span>
</h2>
```

#### CSS

```css
.fancy {
  text-shadow: 2px 2px 3px gold;
}

/\* <p> elements that don't have a class `.fancy` \*/
p:not(.fancy) {
  color: green;
}

/\* Elements that are not <p> elements \*/
body :not(p) {
  text-decoration: underline;
}

/\* Elements that are not <div>s or `.fancy` \*/
body :not(div):not(.fancy) {
  font-weight: bold;
}

/\* Elements that are not <div>s or `.fancy` \*/
body :not(div, .fancy) {
  text-decoration: overline underline;
}

/\* Elements inside an <h2> that aren't a <span> with a class of `.foo` \*/
h2 :not(span.foo) {
  color: red;
}
```

#### Result

### Using :not() with invalid selectors

This example shows the use of `:not()` with invalid selectors and how to prevent invalidation.

#### HTML

```html
<p class="foo">I am a paragraph with .foo</p>
<p class="bar">I am a paragraph with .bar</p>
<div>I am a div without a class</div>
<div class="foo">I am a div with .foo</div>
<div class="bar">I am a div with .bar</div>
<div class="foo bar">I am a div with .foo and .bar</div>
```

#### CSS

```css
/\* Invalid rule, does nothing \*/
p:not(.foo, :invalid-pseudo-class) {
  color: red;
  font-style: italic;
}

/\* Select all <p> elements without the `foo` class \*/
p:not(:is(.foo, :invalid-pseudo-class)) {
  color: green;
  border-top: dotted thin currentcolor;
}

/\* Select all <div> elements without the `foo` or the `bar` class \*/
div:not(.foo, .bar) {
  color: red;
  font-style: italic;
}

/\* Select all <div> elements without the `foo` or the `bar` class \*/
div:not(:is(.foo, .bar)) {
  border-bottom: dotted thin currentcolor;
}
```

#### Result

The `p:not(.foo, :invalid-pseudo-class)` rule is invalid because it contains an invalid selector. The `:is()` pseudo-class accepts a forgiving selector list, so the `:is(.foo, :invalid-pseudo-class)` rule is valid and equivalent to `:is(.foo)`. Thus, the `p:not(:is(.foo, :invalid-pseudo-class))` rule is valid and equivalent to `p:not(.foo)`.

If `:invalid-pseudo-class` was a valid selector, the first two rules above would still be equivalent (the last two rules showcase that). The use of `:is()` makes the rule more robust.

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

| Specification |
| --- |
| Selectors Level 4 # negation |

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

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

See also
--------

* Pseudo-classes
* Pseudo-classes and pseudo-elements
* Other functional CSS pseudo-classes:
    + `:has()`
    + `:is()`
    + `:where()`
* How :not() chains multiple selectors on MDN blog (2023)


:nth-child() - CSS: Cascading Style Sheets

:nth-child()
============

The **`:nth-child()`** CSS pseudo-class matches elements based on the indexes of the elements in the child list of their parents. In other words, the `:nth-child()` selector selects child elements according to their position among all the sibling elements within a parent element.

Try it
------

**Note:** In the `element:nth-child()` syntax, the child count includes sibling children of any element type; but it is considered a match only if the element *at that child position* matches the other components of the selector.

Syntax
------

`:nth-child()` takes a single argument that describes a pattern for matching element indices in a list of siblings. Element indices are 1-based.

```css
:nth-child(<nth> [of <complex-selector-list>]?) {
  /\* ... \*/
}
```

### Keyword values

`odd`

Represents elements whose numeric position in a series of siblings is odd: 1, 3, 5, etc.

`even`

Represents elements whose numeric position in a series of siblings is even: 2, 4, 6, etc.

### Functional notation

`<An+B>`

Represents elements whose numeric position in a series of siblings matches the pattern `An+B`, for every positive integer or zero value of `n`, where:

* `A` is an integer step size,
* `B` is an integer offset,
* `n` is all nonnegative integers, starting from 0.

It can be read as the `An+B`-th element of a list. The `A` and `B` must both have `<integer>` values.

### The `of <selector>` syntax

By passing a selector argument, we can select the **nth** element that matches that selector. For example, the following selector matches the first three list items which have a `class="important"` set.

```css
:nth-child(-n + 3 of li.important) {
}
```

This is different from moving the selector outside of the function, like:

```css
li.important:nth-child(-n + 3) {
}
```

This selector selects list items if they are among the first three children and match the selector `li.important`.

Examples
--------

### Example selectors

`tr:nth-child(odd)` or `tr:nth-child(2n+1)`

Represents the odd rows of an HTML table: 1, 3, 5, etc.

`tr:nth-child(even)` or `tr:nth-child(2n)`

Represents the even rows of an HTML table: 2, 4, 6, etc.

`:nth-child(7)`

Represents the seventh element.

`:nth-child(5n)`

Represents elements **5** [=5×1], **10** [=5×2], **15** [=5×3], **etc.** The first one to be returned as a result of the formula is **0** [=5x0], resulting in a no-match, since the elements are indexed from 1, whereas `n` starts from 0. This may seem weird at first, but it makes more sense when the `B` part of the formula is `>0`, like in the next example.

`:nth-child(n+7)`

Represents the seventh and all following elements: **7** [=0+7], **8** [=1+7], **9** [=2+7], **etc.**

`:nth-child(3n+4)`

Represents elements **4** [=(3×0)+4], **7** [=(3×1)+4], **10** [=(3×2)+4], **13** [=(3×3)+4], **etc.**

`:nth-child(-n+3)`

Represents the first three elements. [=-0+3, -1+3, -2+3]

`p:nth-child(n)`

Represents every `<p>` element in a group of siblings. This selects the same elements as a simple `p` selector (although with a higher specificity).

`p:nth-child(1)` or `p:nth-child(0n+1)`

Represents every `<p>` that is the first element in a group of siblings. This is the same as the `:first-child` selector (and has the same specificity).

`p:nth-child(n+8):nth-child(-n+15)`

Represents the eighth through the fifteenth `<p>` elements of a group of siblings.

### Detailed example

#### HTML

```html
<h3>
  <code>span:nth-child(2n+1)</code>, WITHOUT an <code><em></code> among
  the child elements.
</h3>
<p>Children 1, 3, 5, and 7 are selected.</p>
<div class="first">
  <span>Span 1!</span>
  <span>Span 2</span>
  <span>Span 3!</span>
  <span>Span 4</span>
  <span>Span 5!</span>
  <span>Span 6</span>
  <span>Span 7!</span>
</div>

<br />

<h3>
  <code>span:nth-child(2n+1)</code>, WITH an <code><em></code> among the
  child elements.
</h3>
<p>
  Children 1, 5, and 7 are selected.<br />
  3 is used in the counting because it is a child, but it isn't selected because
  it isn't a <code><span></code>.
</p>
<div class="second">
  <span>Span!</span>
  <span>Span</span>
  <em>This is an `em`.</em>
  <span>Span</span>
  <span>Span!</span>
  <span>Span</span>
  <span>Span!</span>
  <span>Span</span>
</div>

<br />

<h3>
  <code>span:nth-of-type(2n+1)</code>, WITH an <code><em></code> among the
  child elements.
</h3>
<p>
  Children 1, 4, 6, and 8 are selected.<br />
  3 isn't used in the counting or selected because it is an
  <code><em></code>, not a <code><span></code>, and
  <code>nth-of-type</code> only selects children of that type. The
  <code><em></code> is completely skipped over and ignored.
</p>
<div class="third">
  <span>Span!</span>
  <span>Span</span>
  <em>This is an `em`.</em>
  <span>Span!</span>
  <span>Span</span>
  <span>Span!</span>
  <span>Span</span>
  <span>Span!</span>
</div>
```

#### CSS
```

\* {
  font-family: sans-serif;
}

span,
div em {
  padding: 5px;
  border: 1px solid tomato;
  display: inline-block;
  margin-bottom: 3px;
}
```

```css
.first span:nth-child(2n + 1),
.second span:nth-child(2n + 1),
.third span:nth-of-type(2n + 1) {
  background-color: tomato;
}
```

#### Result

### Using 'of <selector>'

In this example there is an unordered list of names, some of them have been marked as **noted** using `class="noted"`. These have been highlighted with a thick bottom border.

#### HTML

```html
<ul>
  <li class="noted">Diego</li>
  <li>Shilpa</li>
  <li class="noted">Caterina</li>
  <li>Jayla</li>
  <li>Tyrone</li>
  <li>Ricardo</li>
  <li class="noted">Gila</li>
  <li>Sienna</li>
  <li>Titilayo</li>
  <li class="noted">Lexi</li>
  <li>Aylin</li>
  <li>Leo</li>
  <li>Leyla</li>
  <li class="noted">Bruce</li>
  <li>Aisha</li>
  <li>Veronica</li>
  <li class="noted">Kyouko</li>
  <li>Shireen</li>
  <li>Tanya</li>
  <li class="noted">Marlene</li>
</ul>
```

#### CSS
```

\* {
  font-family: sans-serif;
}

ul {
  display: flex;
  flex-wrap: wrap;
  list-style: none;
  font-size: 1.2rem;
  padding-left: 0;
}

li {
  margin: 0.125rem;
  padding: 0.25rem;
}

li {
  border: 1px solid tomato;
}

.noted {
  border-bottom: 5px solid tomato;
}
```

In the following CSS we are targeting the **even** list items that are marked with `class="noted"`.

```css
li:nth-child(even of .noted) {
  background-color: tomato;
  border-bottom-color: seagreen;
}
```

#### Result

Items with `class="noted"` have a thick bottom border and items 3, 10 and 17 have a solid background as they are the *even* list items with `class="noted"`.

### of selector syntax vs selector nth-child

In this example, there are two unordered lists of names. The first list shows the effect of `li:nth-child(-n + 3 of .noted)` and the second list shows the effect of `li.noted:nth-child(-n + 3)`.

#### HTML

```html
<ul class="one">
  <li class="noted">Diego</li>
  <li>Shilpa</li>
  <li class="noted">Caterina</li>
  <li>Jayla</li>
  <li>Tyrone</li>
  <li>Ricardo</li>
  <li class="noted">Gila</li>
  <li>Sienna</li>
  <li>Titilayo</li>
  <li class="noted">Lexi</li>
</ul>
<ul class="two">
  <li class="noted">Diego</li>
  <li>Shilpa</li>
  <li class="noted">Caterina</li>
  <li>Jayla</li>
  <li>Tyrone</li>
  <li>Ricardo</li>
  <li class="noted">Gila</li>
  <li>Sienna</li>
  <li>Titilayo</li>
  <li class="noted">Lexi</li>
</ul>
```

#### CSS
```

\* {
  font-family: sans-serif;
}

ul {
  display: flex;
  flex-wrap: wrap;
  list-style: none;
  font-size: 1.2rem;
  padding-left: 0;
}

li {
  margin: 0.125rem;
  padding: 0.25rem;
}

li {
  border: 1px solid tomato;
}

.noted {
  border-bottom: 5px solid tomato;
}
```

```css
ul.one > li:nth-child(-n + 3 of .noted) {
  background-color: tomato;
  border-bottom-color: seagreen;
}

ul.two > li.noted:nth-child(-n + 3) {
  background-color: tomato;
  border-bottom-color: seagreen;
}
```

#### Result

The first case applies a style to the first three list items with `class="noted"` whether or not they are the first three items in the list.

The second case applies a style to the items with `class="noted"` if they are within the first 3 items in the list.

### Using of selector to fix striped tables

A common practice for tables is to use *zebra-stripes* which alternates between light and dark background colors for rows, making tables easier to read and more accessible. If a row is hidden, the stripes will appear merged and alter the desired effect. In this example, you can see two tables with a `hidden` row. The second table handles hidden rows using `of :not([hidden])`.

#### HTML
```

<div class="wrapper">
```

```html
<table class="broken">
  <thead>
    <tr><th>Name</th><th>Age</th><th>Country</th></tr>
  </thead>
  <tbody>
    <tr><td>Mamitiana</td><td>23</td><td>Madagascar</td></tr>
    <tr><td>Yuki</td><td>48</td><td>Japan</td></tr>
    <tr hidden><td>Tlayolotl</td><td>36</td><td>Mexico</td></tr>
    <tr><td>Adilah</td><td>27</td><td>Morocco</td></tr>
    <tr><td>Vieno</td><td>55</td><td>Finland</td></tr>
    <tr><td>Ricardo</td><td>66</td><td>Brazil</td></tr>
  </tbody>
</table>
<table class="fixed">
  <thead>
    <tr><th>Name</th><th>Age</th><th>Country</th></tr>
  </thead>
  <tbody>
    <tr><td>Mamitiana</td><td>23</td><td>Madagascar</td></tr>
    <tr><td>Yuki</td><td>48</td><td>Japan</td></tr>
    <tr hidden><td>Tlayolotl</td><td>36</td><td>Mexico</td></tr>
    <tr><td>Adilah</td><td>27</td><td>Morocco</td></tr>
    <tr><td>Vieno</td><td>55</td><td>Finland</td></tr>
    <tr><td>Ricardo</td><td>66</td><td>Brazil</td></tr>
  </tbody>
</table>
```

```
</div>
```

#### CSS
```

.wrapper {
  display: flex;
  justify-content: space-around;
}
td {
  padding: 0.125rem 0.5rem;
}
```

```css
.broken > tbody > tr:nth-child(even) {
  background-color: silver;
}
```

```css
.fixed > tbody > tr:nth-child(even of :not([hidden])) {
  background-color: silver;
}
```

#### Result

In the first table this is just using `:nth-child(even)` the third row has the `hidden` attribute applied to it. So in this instance the 3rd row is not visible and the 2nd & 4th rows are counted as even, which technically they are but visually they are not.

In the second table the *of syntax* is used to target only the `tr`s that are **not** hidden using `:nth-child(even of :not([hidden]))`.

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

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

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

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

See also
--------

* `:nth-of-type()`
* `:nth-last-child()`
* `:has()`: pseudo-class for selecting parent element
* Tree-structural pseudo-classes
* CSS selectors module