` flex items. We use the `flex-basis` component of the `flex` shorthand property to make all the flex items `200px` wide. We then target every third flex item by using the `:nth-of-type(3n)` selector, widening them to `300px`.
The `column-gap` value is set as `20px` on the flex container to create a `20px` gap between the adjacent flex items in each row.
.flexbox {
display: flex;
flex-flow: row wrap;
height: 100px;
column-gap: 20px;
}
.flexbox > div {
border: 1px solid green;
background-color: lime;
flex: 200px;
}
div:nth-of-type(3n) {
flex: 300px;
}
#### Result
Note: While there is horizontal space between adjacent flex items in each flex row, there is no space between the rows. To set vertical space between flex rows, you can specify a non-zero value for the `row-gap` property. The `gap` shorthand property is also available to set both the `row-gap` and `column-gap` in one declaration, in that order.
### Grid layout
#### HTML
#### CSS
#grid {
display: grid;
height: 100px;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: 100px;
column-gap: 20px;
}
#grid > div {
border: 1px solid green;
background-color: lime;
}
#### Result
### Multi-column layout
#### HTML
This is some multi-column text with a 40px column gap created with the CSS
`column-gap` property. Don't you think that's fun and exciting? I sure do!
#### CSS
.content-box {
column-count: 3;
column-gap: 40px;
}
#### Result
# :dir()
The `:dir()` CSS pseudo-class matches elements based on the directionality of the text contained in them.
/* Selects any element with right-to-left text */
:dir(rtl) {
background-color: red;
}
The `:dir()` pseudo-class uses only the semantic value of the directionality, i.e., the one defined in the document itself. It doesn't account for styling directionality, i.e., the directionality set by CSS properties such as `direction`.
Note: Be aware that the behavior of the `:dir()` pseudo-class is not equivalent to the `[dir=…]` attribute selectors. The latter match the HTML `dir` attribute, and ignore elements that lack it — even if they inherit a direction from their parent. (Similarly, `[dir=rtl]` and `[dir=ltr]` won't match the `auto` value.) In contrast, `:dir()` will match the value calculated by the user agent, even if inherited.
Note: In HTML, the direction is determined by the `dir` attribute. Other document types may have different methods.
## Syntax
:dir([ltr | rtl]) {
/* ... */
}
### Parameters
The `:dir()` pseudo-class requires one parameter, representing the text directionality you want to target.
`ltr`
Target left-to-right elements.
`rtl`
Target right-to-left elements.
## Examples
>
### HTML
### CSS
:dir(ltr) {
background-color: yellow;
}
:dir(rtl) {
background-color: powderblue;
}
### Result
# :empty
The `:empty` CSS pseudo-class represents any element that has no children. Children can be either element nodes or text (including whitespace). Comments, processing instructions, and CSS `content` do not affect whether an element is considered empty.
## Try it
div:empty {
outline: 2px solid deeppink;
height: 1em;
}
Element with no content:
Element with comment:
Element with nested empty element:
Note: In Selectors Level 4, the `:empty` pseudo-class was changed to act like `:-moz-only-whitespace`, but no browser currently supports this yet.
## Syntax
:empty {
/* ... */
}
## Accessibility
Assistive technology such as screen readers cannot parse interactive content that is empty. All interactive content must have an accessible name, which is created by providing a text value for the interactive control's parent element (anchors, buttons, etc.). Accessible names expose the interactive control to the accessibility tree, an API that communicates information useful for assistive technologies.
The text that provides the interactive control's accessible name can be hidden using a combination of properties that remove it visually from the screen but keep it parsable by assistive technology. This is commonly used for buttons that rely solely on an icon to convey purpose.
* What is an accessible name? | The Paciello Group
* Hidden content for better a11y | Go Make Things
* MDN Understanding WCAG, Guideline 2.4 explanations
* Understanding Success Criterion 2.4.4 | W3C Understanding WCAG 2.0
## Examples
>
### HTML
I will be pink.
### CSS
.box {
background: pink;
height: 80px;
width: 80px;
}
.box:empty {
background: lime;
}
### Result
# widows
The `widows` CSS property sets the minimum number of lines in a block container that must be shown at the top of a page, region, or column.
In typography, a widow is the last line of a paragraph that appears alone at the top of a page. (The paragraph is continued from a prior page.)
## Syntax
/*
values */
widows: 2;
widows: 3;
/* Global values */
widows: inherit;
widows: initial;
widows: revert;
widows: revert-layer;
widows: unset;
### Values
``
The minimum number of lines that can stay by themselves at the top of a new fragment after a fragmentation break. The value must be positive.
## Examples
>
### Controlling column widows
#### HTML
This is the first paragraph containing some text.
This is the second paragraph containing some more text than the first one.
It is used to demonstrate how widows work.
This is the third paragraph. It has a little bit more text than the first
one.
#### CSS
div {
background-color: #8cffa0;
columns: 3;
widows: 2;
}
p {
background-color: #8ca0ff;
}
p:first-child {
margin-top: 0;
}
#### Result
# mask-repeat
The `mask-repeat` CSS property sets how mask images are repeated. A mask image can be repeated along the horizontal axis, the vertical axis, both axes, or not repeated at all.
## Syntax
/* One-value syntax */
mask-repeat: repeat-x;
mask-repeat: repeat-y;
mask-repeat: repeat;
mask-repeat: space;
mask-repeat: round;
mask-repeat: no-repeat;
/* Two-value syntax: horizontal | vertical */
mask-repeat: repeat space;
mask-repeat: repeat repeat;
mask-repeat: round space;
mask-repeat: no-repeat round;
/* Multiple values */
mask-repeat:
space round,
no-repeat;
mask-repeat:
round repeat,
space,
repeat-x;
/* Global values */
mask-repeat: inherit;
mask-repeat: initial;
mask-repeat: revert;
mask-repeat: revert-layer;
mask-repeat: unset;
### Values
The `mask-repeat` property is a comma-separated list of two `` values, with the first `` value being the horizontal repetition value and the second value the vertical repetition value, or one keyword value that is a shorthand for two `` values.
#### `` values
The `` values include:
`repeat`
The image is repeated as much as needed to cover the whole mask painting area. Mask images along the edges are clipped when the size of the mask origin box is not an exact multiple of the mask image's size.
`space`
The mask image is repeated as many times as possible without clipping. If the element's origin size is at least twice the size as the mask image's size in the associated dimension, the `mask-position` property is ignored and the first and last images are positioned at the edges of the mask origin container. If the mask origin box is not an exact multiple of the mask image's size, whitespace is distributed evenly between the repeated mask images.
If the origin box size is less than twice the mask image's size in the given dimension, only one mask image can be displayed. In this case, the image is positioned as defined by the `mask-position` property, which defaults to `0% 0%`. The mask image will only be clipped if the mask image is larger than the mask origin box.
`round`
The mask image is repeated as many times as possible in its original dimensions. If the size of the mask origin box is not an exact multiple of the mask image's size, all mask images will be rescaled, shrinking or stretching to ensure no repetitions are clipped.
`no-repeat`
The mask image is not repeated (and hence the mask painting area will not necessarily be entirely covered). The position of the non-repeated mask image is defined by the `mask-position` CSS property.
#### Shorthand values
The one-value syntax is a shorthand for the full two-value syntax:
Single value Two-value equivalent
`repeat-x` `repeat no-repeat`
`repeat-y` `no-repeat repeat`
`repeat` `repeat repeat`
`space` `space space`
`round` `round round`
`no-repeat` `no-repeat no-repeat`
`repeat-x`
The equivalent of `repeat no-repeat`. The image is repeated in the horizontal direction as many times as needed to cover the width of the mask painting area. Mask images along the right or left edges, or both depending on the `mask-position` value, will be clipped if the width of the mask origin box is not an exact multiple of the mask image's width.
`repeat-y`
The equivalent of `no-repeat repeat`. The image is repeated in the vertical direction as many times as needed to cover the height of the mask painting area. Mask images along the top or bottom edges, or both depending on the `mask-position` value, will be clipped if the height of the mask origin box is not an exact multiple of the mask image's height.
## Description
The `mask-repeat` property accepts a comma-separated pair of values or one shorthand value. In the two-value syntax, the first value represents the horizontal repetition behavior and the second value represents the vertical behavior.
### Multiple values
Each `mask-repeat` value in this comma-separated list applies to a separate mask layer. An element can have multiple mask layers applied. The number of layers is determined by the number of comma-separated values in the `mask-image` property value (even if a value is `none`). Each `mask-repeat` value is matched up with the `mask-image` values, in order. If the number of values in the two properties differs, any excess values of `mask-repeat` values are ignored, or, if `mask-repeat` has fewer values than `mask-image`, the `mask-repeat` values are repeated.
### Sizing and positioning
The `mask-repeat` property value defines how mask images are tiled after they have been sized and positioned. The first (and possibly only) mask-image repetition is positioned by the `mask-position` property, which defaults to `0% 0%`, the top-left corner of the origin box. The size is defined by the `mask-size` property, which defaults to `auto`. The positions of the repeated masks are based on this initial mask instance.
### Clipping
Mask images will not repeat but will be clipped if the mask image's size is larger than the origin box, except in the case of `round`, where a single mask will be scaled down to fit the origin box.
With `repeat` values, mask images may be clipped at the edge of the origin box if the dimension (width or height) of the box is not an exact multiple of the mask's.
### Aspect ratio
By default, mask images maintain the aspect ratio set by the `mask-size` property or their default aspect ratio if the `mask-size` defaults to or is explicitly set to `auto`. Only in the case of `round` value in both directions might the mask aspect ratio be distorted.
If `round` is set in both directions, the resulting repeated mask images will match the aspect ratio of the origin box. As the mask images are scaled to fit, they may be distorted, ensuring the mask images are not clipped. If `round` is set in only one dimension, the aspect ratio of the mask size is respected.
### Rounded repetitions
In the case of `round`, mask images are scaled up or down to fit the mask image in the positioning area a whole number of times. The mask size increases or decreases to fit the nearest natural number or masks, with a minimum of one mask.
The rendered dimensions of the mask is the size of the origin box divided by the number of iterations of masks in that dimension, where the iterations being an integer greater than zero. The number of iterations is: `X' = D / round(D / X)` where `D` is the width or height, and `round()` is a function that returns the nearest integer greater than zero.
For example, if `mask-repeat` is set to `round` and the `mask-size` sets the mask to be `40px` wide, when the origin box is present (greater than `0px` wide) but less than `60px` wide, there will be a single iteration that is 100% of the width of that box. If the box is at least `60px` wide but less than `100px` wide, there will be two iterations that are each `50%` of the box. From 100px to 140px, three masks will fit along the horizontal axis. These "`40px`-wide" masks will only be `40px` wide if the origin box is an exact multiple of `40px`.
## Examples
>
### Basic usage
This example demonstrates setting the `mask-repeat` property for a single mask.
#### HTML
Our HTML includes a basic `