recursal/MDN huggingface dataset:
mask-position
=============

**`mask-position`** は CSS プロパティで、定義されたマスク画像それぞれについて、 `mask-origin` で設定されたマスク位置レイヤーに対する初期位置を設定します。


```css
/\* キーワード値 \*/
mask-position: top;
mask-position: bottom;
mask-position: left;
mask-position: right;
mask-position: center;

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

/\* 複数の値 \*/
mask-position: top right;
mask-position:
  1rem 1rem,
  center;

/\* グローバル値 \*/
mask-position: inherit;
mask-position: initial;
mask-position: revert;
mask-position: unset;
```

構文
--

1 つ以上の `<position>` 値をカンマで区切ったもの。

### 値

`<position>`

要素ボックスの辺からの二次元の位置を表す 1 つから 4 つの値です。相対または絶対オフセットを与えることができます。なお、位置は要素ボックスの外に設定することができます。

公式定義
----

|  |  |
| --- | --- |
| 初期値 | `center` |
| 適用対象 | すべての要素。 SVG の場合は `defs` 要素やすべてのグラフィック要素を除いたコンテナー要素に適用される |
| 継承 | なし |
| パーセント値 | マスク描画領域の寸法からマスクレイヤー画像の寸法を引いたものに対する相対値 (`background-position` のテキストを参照) |
| 計算値 | 原点を表す 2 つのキーワードと、その原点からの 2 つのオフセットで、それぞれが絶対的な長さ (<length> が指定された場合) またはパーセント値で指定される。 |
| アニメーションの種類 | 反復可能リスト |

形式文法
----
```

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

例
-

### マスク位置の設定

`mask-position` の値を上記の許容値のいずれかに変更してみてください。
 Chromium ベースのブラウザーでこの例を見る場合は、`-webkit-mask-position` の値を変更してください。

仕様書
---

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

ブラウザーの互換性
---------

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

関連情報
----

* Clipping and Masking in CSS
:empty
======

**`:empty`** は CSS の擬似クラスで、子を持たない要素を表します。子とは要素のノードまたは文字列 (ホワイトスペースを含む) です。コメント、処理指示、 CSS の `content` は要素が空であるかどうかの判断には影響しません。

試してみましょう
--------

**メモ:** Selectors Level 4 では、 `:empty` 擬似クラスは `:-moz-only-whitespace` のような動作に変更されましたが、現在これに対応しているブラウザーはありません。

構文
--
```

:empty
```

例
-

### HTML


```html
<div class="box"><!-- I will be lime. --></div>
<div class="box">I will be pink.</div>
<div class="box">
  <!-- I will be pink in older browsers because of the whitespace around this comment. -->
</div>
<div class="box">
  <p>
    <!-- I will be pink in all browsers because of the non-collapsible whitespace and elements around this comment. -->
  </p>
</div>
```

### CSS
```

body {
  display: flex;
  justify-content: space-around;
}
```



```css
.box {
  background: pink;
  height: 80px;
  width: 80px;
}

.box:empty {
  background: lime;
}
```

### 結果

アクセシビリティの考慮
-----------

スクリーンリーダーなどの支援技術は、空の対話型コンテンツを解釈することができません。すべての対話型コンテンツは、対話型コントロールの親要素 (アンカーやボタンなど) に文字列の値を設定することで作成されるアクセシブル名を持つ必要があります。アクセシブル名は、支援技術に有益な情報を通信する API である アクセシビリティツリー で使用されます。

対話型コントロールのアクセシブル名を提供する文字列は、プロパティの組み合わせを使用して非表示にすることができ、画面からは視覚的に削除されますが、支援技術からは解釈できるようにすることができます。これは、アイコンだけで目的を示すボタンでよく使用されます。

* What is an accessible name? | The Paciello Group
* Hidden content for better a11y | Go Make Things
* MDN "WCAG を理解する ― ガイドライン 2.4 の解説"
* Understanding Success Criterion 2.4.4 | W3C Understanding WCAG 2.0
仕様書
---

| Specification |
| --- |
| Selectors Level 4 # the-empty-pseudo |

ブラウザーの互換性
---------

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

関連情報
----

* `:-moz-only-whitespace` 
Non-standard
 – 接頭辞付きで、 Selectors Level 4 の変更を実装
* `:blank` 
Experimental
border-left-color
=================

**`border-left-color`** は CSS のプロパティで、要素の左側の境界線の色を設定します。一括指定プロパティの `border-color` または `border-left` でも設定することができます。

試してみましょう
--------

構文
--


```css
/\* <color> 値 \*/
border-left-color: red;
border-left-color: #ffbb00;
border-left-color: rgb(255, 0, 0);
border-left-color: hsla(100%, 50%, 25%, 0.75);
border-left-color: currentcolor;
border-left-color: transparent;

/\* グローバル値 \*/
border-left-color: inherit;
border-left-color: initial;
border-left-color: revert;
border-left-color: unset;
```


`border-left-color` プロパティは 1 つの値で指定します。

### 値

`<color>`

左の境界線の色を定義します。

公式定義
----

|  |  |
| --- | --- |
| 初期値 | `currentcolor` |
| 適用対象 | すべての要素。 `::first-letter` にも適用されます。 |
| 継承 | なし |
| 計算値 | 色の計算値 |
| アニメーションの種類 | 色 |

形式文法
----
```

border-left-color =   
  <color>     |  
  <image-1D>    
  
<image-1D> =   
  <stripes()>    
  
<stripes()> =   
  stripes( <color-stripe># )    
  
<color-stripe> =   
  <color>                            &&  
  [ <length-percentage> | <flex> ]?    
  
<length-percentage> =   
  <length>      |  
  <percentage>    
  
```

例
-

### 境界線が付いた単純な div

#### HTML


```html
<div class="mybox">
  <p>
    これは周囲に境界線があるボックスです。 なお、ボックスのその辺が
    <span class="redtext">赤</span>になっています。
  </p>
</div>
```


#### CSS


```css
.mybox {
  border: solid 0.3em gold;
  border-left-color: red;
  width: auto;
}

.redtext {
  color: red;
}
```


#### 結果

仕様書
---

| Specification |
| --- |
| CSS Backgrounds and Borders Module Level 3 # border-color |

ブラウザーの互換性
---------

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

関連情報
----

* 境界に関する CSS 一括指定プロパティ: `border`, `border-left`, `border-color`.
* 他の境界線の色に関する CSS プロパティ: `border-right-color`, `border-bottom-color`, `border-top-color`
* 同じ境界に適用される他の境界関連の CSS プロパティ: `border-left-style`, `border-left-width`
border-inline-end-width
=======================

**`border-inline-end-width`** は CSS のプロパティで、要素の論理的なインライン方向の終端側の境界の幅を定義し、それが要素の書字方向やテキストの方向に応じて物理的な境界の幅に対応づけられます。これは `border-top-width`、`border-right-width`、`border-bottom-width`、`border-left-width` の何れかに対応し、どれに対応するかは `writing-mode`、`direction`、`text-orientation` で定義された値によって決まります。

試してみましょう
--------

構文
--


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

/\* グローバル値 \*/
border-inline-end-width: inherit;
border-inline-end-width: initial;
border-inline-end-width: revert;
border-inline-end-width: unset;
```


関連するプロパティとしては、 `border-block-start-width`、`border-block-end-width`、`border-inline-start-width` が要素の他の境界の幅を定義します。

### 値

`<'border-width'>`

境界の幅です。 `border-width` を参照してください。

公式定義
----

|  |  |
| --- | --- |
| 初期値 | `medium` |
| 適用対象 | すべての要素 |
| 継承 | なし |
| パーセント値 | 包含ブロックの論理的な幅 |
| 計算値 | 絶対的な長さ、境界スタイルが `none` または `hidden` であれば `0` |
| アニメーションの種類 | 計算値の型による |

形式文法
----
```

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

例
-

### テキストが垂直方向の場合の境界の適用

#### HTML


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


##### CSS


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

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


#### 結果

仕様書
---

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

ブラウザーの互換性
---------

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

関連情報
----

* このプロパティは `border-top-width`、`border-right-width`、`border-bottom-width`、`border-left-width` のうちの 1 つに対応づけられます
* `writing-mode`、`direction`、`text-orientation`
inset-inline-end
================

**`inset-inline-end`** は CSS のプロパティで、要素における行末からの論理的な内部位置を定義し、要素の書字方向やテキストの向きに従って物理的なオフセットに対応付けられます。 `top`, `right`, `bottom`, `left` のいずれかのプロパティに、 `writing-mode`, `direction`, `text-orientation` で定義された値に従って対応します。

試してみましょう
--------

構文
--


```css
/\* <length> 値 \*/
inset-inline-end: 3px;
inset-inline-end: 2.4em;

/\* 包含ブロックの幅または高さに対する <percentage> 値 \*/
inset-inline-end: 10%;

/\* キーワード値 \*/
inset-inline-end: auto;

/\* グローバル値 \*/
inset-inline-end: inherit;
inset-inline-end: initial;
inset-inline-end: revert;
inset-inline-end: revert-layer;
inset-inline-end: unset;
```


`inset-inline-start` と `inset-inline-end` の一括指定は `inset-inline` です。

### 値

`inset-inline-end` プロパティは `left` プロパティと同じ値を取ります。

公式定義
----

|  |  |
| --- | --- |
| 初期値 | `auto` |
| 適用対象 | 位置指定要素 |
| 継承 | なし |
| パーセント値 | 包含ブロックの論理的な幅 |
| 計算値 | 方向が論理的である以外はボックスのオフセット、 `top`, `right`, `bottom`, `left` と同じ |
| アニメーションの種類 | length または パーセント値, calc(); |

形式文法
----
```

inset-inline-end =   
  auto                 |  
  <length-percentage>    
  
<length-percentage> =   
  <length>      |  
  <percentage>    
  
```

例
-

### インライン方向の末尾のオフセットの設定

#### HTML


```html
<div>
  <p class="exampleText">テキストの例</p>
</div>
```


#### CSS


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

.exampleText {
  writing-mode: vertical-rl;
  position: relative;
  inset-inline-end: 20px;
  background-color: #c8c800;
}
```


#### 結果

仕様書
---

| Specification |
| --- |
| CSS Logical Properties and Values Level 1 # position-properties |

ブラウザーの互換性
---------

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

関連情報
----

* 内部位置を定義する他のプロパティ: `inset-block-start`, `inset-block-end`, `inset-inline-start`
* 対応する物理的プロパティ: `top`, `right`, `bottom`, `left`
* `writing-mode`, `direction`, `text-orientation`
:first-child
============

**`:first-child`** は CSS の擬似クラスで、兄弟要素のグループの中で最初の要素を表します。


```css
/\* 兄弟要素の中で最初の <p> を
 すべてを選択 \*/
p:first-child {
  color: lime;
}
```

試してみましょう
--------

**メモ:** 当初の定義では、親のある要素のみが選択されていました。 Selectors Level 4 の初期に、これは必要なくなりました。

構文
--
```

:first-child
```

例
-

### 基本的な例

#### HTML


```html
<div>
  <p>This text is selected!</p>
  <p>This text isn't selected.</p>
</div>

<div>
  <h2>This text isn't selected: it's not a `p`.</h2>
  <p>This text isn't selected.</p>
</div>
```


#### CSS


```css
p:first-child {
  color: lime;
  background-color: black;
  padding: 5px;
}
```


#### 結果

### リストのスタイル付け

#### HTML


```html
<ul>
  <li>Item 1</li>
  <li>Item 2</li>
  <li>
    Item 3
    <ul>
      <li>Item 3.1</li>
      <li>Item 3.2</li>
      <li>Item 3.3</li>
    </ul>
  </li>
</ul>
```


#### CSS


```css
ul li {
  color: blue;
}

ul li:first-child {
  color: red;
  font-weight: bold;
}
```


#### 結果

仕様書
---

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

ブラウザーの互換性
---------

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

関連情報
----

* `:-moz-first-node` 
Non-standard
* `:first-of-type`
* `:last-child`
* `:nth-child()`
:first-of-type
==============

**`:first-of-type`** は CSS の擬似クラスで、兄弟要素のグループの中でその種類の最初の要素を表します。

試してみましょう
--------

構文
--


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

例
-

### 最初の段落の整形

#### HTML


```html
<h2>見出し</h2>
<p>段落 1</p>
<p>段落 2</p>
```


#### CSS


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


#### 結果

### 入れ子になった要素

この例は、入れ子になった要素を対象に含める方法を示します。なお、要素型セレクターが書かれていない場合は、全称セレクター (`*`) が暗黙に含まれます。

#### HTML


```html
<article>
  <div>これは最初の `div` です。</div>
  <div>これは<span>内側で最初の `span`</span> です。</div>
  <div>
    これは<em>内側で最初の `em`</em>で、一方これは<em>最後の `em` </em>です。
  </div>
  <div>これは<span>スタイル付けされた内側の `span`</span>です</div>
  <p>これは `p` で修飾しています。</p>
  <div>これは最後の `div` です。</div>
</article>
```


#### CSS


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


#### 結果

仕様書
---

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

ブラウザーの互換性
---------

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

関連情報
----

* `:first-child`, `:last-of-type`, `:nth-of-type`
CSS 擬似要素
========

**CSS 擬似要素**モジュールは、文書ツリー内には直接存在しない抽象要素を定義します。擬似要素と呼ばれるこれらの抽象要素は、レンダーツリーの一部を表し、選択したりスタイル設定したりすることができます。擬似要素は、文書ツリーによって指定された以上の文書ツリーに関する抽象化をするために使用します。

擬似要素の接頭辞はダブルコロン (`::`) です。擬似要素をセレクターに追加すると（`p::first-line`　など）、擬似要素を対象としてスタイル設定することができます。

擬似要素は、 HTML に含まれないものや 余分なマークアップを追加することなく他の方法では対象とすることができないコンテンツの一部を対象とすることができます。 `<input>` 要素のプレースホルダーについて考えてみましょう。これは抽象要素であり、文書ツリー内の明確なノードではありません。このプレースホルダーを選択するには `::placeholder` 擬似要素を用います。別の例として、 `::selection` 擬似要素は、ユーザーが現在選択しているコンテンツに一致し、ユーザーがコンテンツを操作して選択を変更したときに一致するものをスタイル設定することができます。同様に、 `::first-line` 擬似要素は、要素の最初の行を対象とし、要素の行の長さを問い合わせることなく、最初の行の文字数が変われば自動的に更新されます。

リファレンス
------

### セレクター

* `::after`
* `::before`
* `::file-selector-button` (en-US)
* `::first-letter`
* `::first-line`
* `::grammar-error`
* `::marker`
* `::placeholder`
* `::selection`
* `::spelling-error`
* `::target-text`
### インターフェイス

* `CSSPseudoElement` インターフェイス
    + `CSSPseudoElement.element` プロパティ
    + `CSSPseudoElement.type` プロパティ
### 用語

* 用語集の擬似要素
ガイド
---

CSS 擬似要素

すべての CSS 仕様と WebVTT で定義されている擬似要素のアルファベット順リスト。

構成要素: 擬似クラスと擬似要素

セレクターに関する CSS 構成要素の節の一部です。この記事では、擬似要素とは何か、擬似クラスとどのように組み合わせ、 `::before` および `::after` 擬似要素でコンテンツを生成するために使用できるかを定義します。

擬似要素を使用した装飾的なボックスの作成

視覚効果のために `::before` と `::after` 擬似要素を使用して生成コンテンツをスタイル設定する例です。

関連する概念
------

* `::backdrop`
* Web Video Text Tracks Format (WebVTT) キュー:
    + `::cue`
    + `::cue()`
    + `::cue-region`
* CSS スコープ化 (en-US)モジュール
    + `:host`
    + `:host()`
    + `:host-context()` (en-US)
    + `::slotted()`
* CSS シャドウ部品 (en-US)モジュール
    + `::part`
* CSS セレクター
    + 属性セレクター
    + 結合子
    + クラスセレクター
    + ID セレクター
    + 型セレクター
    + 擬似クラス
    + 全称セレクター
* `placeholder` 属性（`<input>` 要素）
* `:placeholder-shown` セレクター
* CSS 生成コンテンツ
    + `content` プロパティ
    + `quotes` プロパティ
* テキストフラグメント
* `AnimationEvent.pseudoElement` プロパティ
* `KeyframeEffect.pseudoElement` (en-US) プロパティ
* `TransitionEvent.pseudoElement` プロパティ
仕様書
---

| Specification |
| --- |
| CSS Pseudo-Elements Module Level 4  |

関連情報
----

* 詳細度
* CSS セレクターモジュール
* CSS シャドウ部品 (en-US)モジュール
* CSS 生成コンテンツモジュール
* CSS 位置指定レイアウトモジュール
@property
=========

Limited availability
--------------------

This feature is not Baseline because it does not work in some of the most widely-used browsers.

* Learn more
* See full compatibility
* Report feedback
**Experimental:** **これは実験的な機能です。**  
本番で使用する前にブラウザー互換性一覧表をチェックしてください。

**`@property`** は CSS の`アットルール`で、 API の CSS Houdini の傘下にあるものです。開発者が明示的に `CSS custom properties` を定義し、プロパティ型のチェック、既定値の設定、プロパティが値を継承するかどうかの定義ができるようになっています。

`property` ルールは、 JS を実行することなく、スタイルシートの中で直接カスタムプロパティの登録を表します。有効な `@property` ルールは、あたかも `CSS.registerProperty` が同等のパラメータで呼び出されたかのように、登録されたカスタムプロパティを生成します。

構文
--


```css
@property --property-name {
  syntax: "<color>";
  inherits: false;
  initial-value: #c0ffee;
}
```

### 記述子

`syntax`

プロパティに許容される構文を記述します。

`inherits`

`property` で指定されたカスタムプロパティの登録を既定で継承するかどうかを制御します。

`initial-value`

プロパティの初期値を設定します。

有効な `@property` ルールはカスタムプロパティの登録を表し、プロパティ名はこのルールに先行するものをシリアライズしたものです。

`@property` ルールは `syntax` および `inherits` 記述子を必要とします。どちらかがない場合は、ルール全体が無効となり、無視されます。 `initial-value` 記述子は構文が全称構文定義である場合のみ省略可能で、それ以外の場合は必須です。その場合、存在しないとルール全体が無効となり、無視されます。

未知の記述子は無効で無視されますが、 `@property` ルールは無効になりません。

例
-

`--my-color` `カスタムプロパティ`に色としての型チェックと、既定値、さらに値が継承されないことを追加します。

CSS の `@property` [アットルール]](/ja/docs/Web/CSS/At-rule)を使用する場合は次のようになります。


```css
@property --my-color {
  syntax: "<color>";
  inherits: false;
  initial-value: #c0ffee;
}
```


JavaScript の `CSS.registerProperty` を使用する場合は次のようになります。


```js
window.CSS.registerProperty({
  name: "--my-color",
  syntax: "<color>",
  inherits: false,
  initialValue: "#c0ffee",
});
```

形式文法
----
```

@property =   
  @property <custom-property-name> { <declaration-list> }    
  
```

仕様書
---

| Specification |
| --- |
| CSS Properties and Values API Level 1 # at-property-rule |

ブラウザーの互換性
---------

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

関連情報
----

* CSS Properties and Values API
* CSS Painting API
* CSS Typed Object Model
* CSS Houdini
min-width
=========

**`min-width`** は CSS のプロパティで、要素の最小幅を設定します。これは `width` プロパティの使用値が、`min-width` で指定した値を下回ることを防ぎます。

試してみましょう
--------

`min-width` の値が `max-width` および `width` の値より大きい場合は、`min-width` の値が要素の幅になります。

構文
--


```css
/\* <length> 値 \*/
min-width: 3.5em;

/\* <percentage> 値 \*/
min-width: 10%;

/\* キーワード値 \*/
min-width: max-content;
min-width: min-content;
min-width: fit-content(20em);

/\* グローバル値 \*/
min-width: inherit;
min-width: initial;
min-width: revert;
min-width: unset;
```

### 値

`<length>`

`min-width` を絶対的な値で定義します。

`<percentage>`

`min-width` を包含ブロックの幅に対するパーセント値で定義します。

`auto`

ブラウザーが指定された要素の `min-width` を計算して選択します。

`max-content`

内容物が推奨する `min-width` です。

`min-content`

内容物の最小の `min-width` です。

`fit-content(`<length-percentage>`)`

利用可能な空白を指定された引数で置き換えた `fit-content` 式を使用します。すなわち、 `min(max-content, max(min-content, 引数))` です。

公式定義
----

|  |  |
| --- | --- |
| 初期値 | `auto` |
| 適用対象 | 置換要素でないインライン要素、テーブルの行、行グループを除くすべての要素 |
| 継承 | なし |
| パーセント値 | 包含ブロックの幅に対する相対値 |
| 計算値 | 指定されたパーセント値または絶対的な長さ |
| アニメーションの種類 | length または パーセント値, calc(); |

形式文法
----
```

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

例
-

### 要素の最小幅を設定


```css
table {
  min-width: 75%;
}

form {
  min-width: 0;
}
```

仕様書
---

| Specification |
| --- |
| CSS Box Sizing Module Level 3 # min-size-properties |
| CSS Box Sizing Module Level 4 # sizing-values |

ブラウザーの互換性
---------

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

関連情報
----

* `width`, `max-width`
* ボックスモデル, `box-sizing`
CSS マスク
=======

**CSS マスク** (CSS masking) は CSS のモジュールの一つで、可視要素の一部または全部を隠すためのマスク、クリップを定義します。

リファレンス
------

### プロパティ

* `clip` 
非推奨
* `clip-path`
* `clip-rule`
* `mask`
* `mask-border`
* `mask-border-mode`
* `mask-border-outset`
* `mask-border-repeat`
* `mask-border-slice`
* `mask-border-source`
* `mask-border-width`
* `mask-clip`
* `mask-composite`
* `mask-image`
* `mask-mode`
* `mask-origin`
* `mask-position`
* `mask-repeat`
* `mask-size`
* `mask-type`
仕様書
---

| Specification |
| --- |
| CSS Masking Module Level 1  |
:only-of-type
=============

CSS の **`:only-of-type`** 擬似クラスは、同じ型の兄弟要素がない要素を表します。
```

/* <p> が親の中にある唯一の <p> 出逢った場合に選択 */
p:only-of-type {
  background-color: lime;
}
```

試してみましょう
--------

**メモ:** 最初の定義では、親のある要素のみが選択されていました。 Selectors Level 4 の初期に、これは必要なくなりました。

構文
--
```

:only-of-type
```

例
-

### 同じ型の兄弟がない要素をスタイル付け

#### HTML


```html
<main>
  <div>I am `div` #1.</div>
  <p>I am the only `p` among my siblings.</p>
  <div>I am `div` #2.</div>
  <div>
    I am `div` #3.
    <i>I am the only `i` child.</i>
    <em>I am `em` #1.</em>
    <em>I am `em` #2.</em>
  </div>
</main>
```


#### CSS


```css
main :only-of-type {
  color: red;
}
```


#### 結果

仕様書
---

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

ブラウザーの互換性
---------

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

関連情報
----

* `:only-child`
* `:first-of-type`
* `:last-of-type`
* `:nth-of-type`
CSS 生成コンテンツ
===========

**CSS 生成コンテンツ** (CSS Generated Content) は CSS のモジュールの一つで、要素にコンテンツを追加する方法を定義します。生成されたコンテンツは、無名で置換された要素にコンテンツを追加したり、非常に限られた状況で DOM ノードのコンテンツを生成された値で置き換えたりするために使用することができます。

詳しくは生成コンテンツのハウツーガイドや、実装情報については `content` および `quotes` プロパティをご覧ください。

リファレンス
------

### プロパティ

* `content`
* `quotes`
仕様書
---

| Specification |
| --- |
| CSS Generated Content Module Level 3  |

関連情報
----

* CSS 生成コンテンツの使用
* `content`
* `quotes`
* `::before`
* `::after`
* `::marker`
:nth-last-child()
=================

**`:nth-last-child()`** は CSS の擬似クラスで、兄弟要素のグループの中での位置に基づいて選択します。


```css
/\* 兄弟要素の中で、後ろから数えて
 3 つおきに要素を選択 \*/
:nth-last-child(4n) {
  color: lime;
}
```

試してみましょう
--------

**メモ:** この擬似クラスは、最初から後に向けてではなく*最後*から前に向けて数えるという点を除けば、本質的に `:nth-child` と同じです。

構文
--

`nth-last-child` 擬似クラスは、要素を選択する最後から数えるパターンを表す引数を 1 つ取ります。
```

:nth-last-child( <nth> [ of <complex-selector-list> ]? )
```

### キーワード値

`odd`

一連の兄弟要素の中で、最後から奇数番目の要素 (1, 3, 5, など) を表します。

`even`

一連の兄弟要素の中で、最後から偶数番目の要素 (2, 4, 6, など) を表します。

### 関数記法

`<An+B>`

一連の兄弟要素の中で、 `n` に正の整数か0が入るとき、 `An+B` のパターンに一致する位置の要素を表します。後ろから数えた最初の要素の番号は `1` です。 `A` と `B` の値は両方とも `<integer>` です。

例
-

### セレクターの例

`tr:nth-last-child(odd)` または `tr:nth-last-child(2n+1)`

HTML テーブルの最後から数えた奇数行 (1, 3, 5, など) を表します。

`tr:nth-last-child(even)` または `tr:nth-last-child(2n)`

HTML テーブルの最後から数えた偶数行 (2, 4, 6, など) を表します。

`:nth-last-child(7)`

最後から数えて 7 番目の要素を表します。

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

最後から数えて 5, 10, 15 番目などの要素を表します。

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

最後から数えて 4, 7, 10, 13 番目などの要素を表します。

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

兄弟要素のグループの中で最後の3つの要素を表します。

`p:nth-last-child(n)` または `p:nth-last-child(n+1)`

兄弟要素のグループの中ですべての `<p>` 要素を表します。これは単純な `p` セレクターと同じです。 (`n` はゼロから始まるので、最後の要素が1で始まり、 `n` および `n+1` が共に同じ要素を選択します。)

`p:nth-last-child(1)` または `p:nth-last-child(0n+1)`

兄弟要素のグループの中で最初の `<p>` 要素すべてを表します。これは `:last-child` セレクターと同じです。

### 詳細な例

#### 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;
}

/\* 最後から 3 つの要素を選択 \*/
tr:nth-last-child(-n + 3) {
  background-color: pink;
}

/\* 後ろから 2 番目から最初までの要素を選択 \*/
tr:nth-last-child(n + 2) {
  color: blue;
}

/\* 後ろから 2 番目の要素のみを選択 \*/
tr:nth-last-child(2) {
  font-weight: 600;
}
```


#### 結果

### 数量クエリー

*数量クエリー*は、要素が存在する数に応じてスタイル付けします。この例では、リストの中に項目が3つ以上ある場合にリスト項目が赤に変わります。これは `nth-last-child` 擬似クラスと 後続兄弟結合子の機能を組み合わせることで実現できます。

#### HTML


```html
<h4>4 項目のリスト (スタイル付き):</h4>
<ol>
  <li>One</li>
  <li>Two</li>
  <li>Three</li>
  <li>Four</li>
</ol>

<h4>2 項目のリスト (スタイルなし):</h4>
<ol>
  <li>One</li>
  <li>Two</li>
</ol>
```


#### CSS


```css
/\* 3 つ以上のリスト項目がある場合、
 すべてにスタイル付けする \*/
li:nth-last-child(n + 3),
li:nth-last-child(3) ~ li {
  color: red;
}
```


#### 結果

仕様書
---

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

ブラウザーの互換性
---------

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

関連情報
----

* `:nth-child`, `:nth-last-of-type`
* CSS の数量クエリー
:root
=====

**`:root`** は CSS の擬似クラスで、文書を表すツリーのルート要素を選択します。 HTML では `:root` は `<html>` 要素を表し、詳細度が高いことを除けば `html` セレクターと同等です。


```css
/\* 文書のルート要素（HTML の場合は <html>）を選択 \*/
:root {
  background: yellow;
}
```

構文
--
```

:root
```

例
-

### グローバルの CSS 変数

`:root` はグローバルの CSS 変数を宣言するのに便利です。


```css
:root {
  --main-color: hotpink;
  --pane-padding: 5px 42px;
}
```

仕様書
---

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

ブラウザーの互換性
---------

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

関連情報
----

* `<html>`
* `Document.rootElement`
* `Node.getRootNode()`
* `Element.shadowRoot`
* `ShadowRoot`
:optional
=========

**`:optional`** は CSS の擬似クラスで、 `required` 属性が設定されていない `<input>`, `<select>`, `<textarea>` 要素を表します。


```css
/\* 任意の <input> をすべて選択 \*/
input:optional {
  border: 1px dashed black;
}
```

試してみましょう
--------

この擬似クラスは。フォームを送信するにあたって必須ではない入力欄にスタイルを適用するのに便利です。

**メモ:** `:required` 擬似クラスは*必須*のフォーム欄を選択します。

構文
--
```

:optional
```

例
-

### 省略可能なフィールドの枠を紫にする

#### HTML


```html
<form>
  <div class="field">
    <label for="url\_input">Enter a URL:</label>
    <input type="url" id="url\_input" />
  </div>

  <div class="field">
    <label for="email\_input">Enter an email address:</label>
    <input type="email" id="email\_input" required />
  </div>
</form>
```


#### CSS


```css
label {
  display: block;
  margin: 1px;
  padding: 1px;
}

.field {
  margin: 1px;
  padding: 1px;
}

input:optional {
  border-color: rebeccapurple;
  border-width: 3px;
}
```


#### 結果

アクセシビリティの考慮
-----------

フォームに必須ではない `<input>` が含まれている場合、必須の入力欄には `required` 属性を適用してください。これによって、読み上げソフトなどの支援技術を使用している人が、フォームを送信するためにどの入力欄が有効なコンテンツを必要とするかを理解することができます。

必須の入力欄を視覚的に示すのに、色だけに依存しないようにしてください。通常、説明する文字列やアイコンが使用されます。

* MDN WCAG を理解する ― ガイドライン 3.3 の解説
* Understanding Success Criterion 3.3.2 | W3C Understanding WCAG 2.0
仕様書
---

| Specification |
| --- |
| HTML Standard # selector-optional |
| Selectors Level 4 # opt-pseudos |

ブラウザーの互換性
---------

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

関連情報
----

* 他の検証関連の擬似クラス: `:required`, `:invalid`, `:valid`
* フォームデータの検証