2023/02/21 時点の英語版に同期

files/ja/web/css/_doublecolon_first-letter/index.md

@@ -1,26 +1,23 @@
 ---
-title: "::first-letter (:first-letter)"
+title: "::first-letter"
 slug: Web/CSS/::first-letter
+l10n:
+  sourceCommit: 5fea7c9593f5e4b4ef13ec65064acf1eabf01e4e
 ---
 
 {{CSSRef}}
 
-**`::first-letter`** は [CSS](/ja/docs/Web/CSS) の[擬似要素](/ja/docs/Web/CSS/Pseudo-elements)で、[ブロックレベル要素](/ja/docs/Web/CSS/Visual_formatting_model#block-level_elements_and_block_boxes)の最初の行の最初の文字にスタイルを適用します。ただし、最初の文字より前に他のコンテンツ (画像やインラインテーブルなど) がないときに限ります。
+**`::first-letter`** は [CSS](/ja/docs/Web/CSS) の[擬似要素](/ja/docs/Web/CSS/Pseudo-elements)で、[ブロックコンテナー](/ja/docs/Web/CSS/Visual_formatting_model#ブロックコンテナー)の最初の行の最初の文字にスタイルを適用します。ただし、最初の文字より前に他のコンテンツ（画像やインラインテーブルなど）がないときに限ります。
 
-```css
-/* <p> の最初の文字を選択します */
-p::first-letter {
-  font-size: 130%;
-}
-```
+{{EmbedInteractiveExample("pages/tabbed/pseudo-element-first-letter.html", "tabbed-shorter")}}
 
 要素の最初の文字は、常に単純に識別できるとは限りません。
 
 - 最初の文字のすぐ前後にある記号 (punctuation) も範囲に含まれます。記号とは、 Unicode の _open_ (Ps), _close_ (Pe), _initial quote_ (Pi), _final quote_ (Pf), and _other punctuation_ (Po) の各クラスで定義されているすべての文字です。
 - 言語によっては常に一緒に大文字化される連字があります。例えばオランダ語の `IJ` などです。この場合、連字の両方の文字が `::first-letter` 擬似要素で選択されます。
 - {{ cssxref("::before") }} 擬似要素と {{ cssxref("content") }} プロパティの組み合わせにより、要素の先頭にテキストが挿入されることがあります。この場合、 `::first-letter` は生成されたこのコンテンツの最初の文字に一致します。
 
-> **メモ:** CSS3 では[擬似クラス](/ja/docs/Web/CSS/Pseudo-classes)と[擬似要素](/ja/docs/Web/CSS/Pseudo-elements)を見分けやすくするために、 `::first-letter` の表記法（二重コロン付き）が導入されました。ブラウザーでは CSS2 で導入された `:first-letter` も使用できます。
+> **メモ:** CSS では[擬似クラス](/ja/docs/Web/CSS/Pseudo-classes)と[擬似要素](/ja/docs/Web/CSS/Pseudo-elements)を見分けやすくするために、 `::first-letter` の表記法（二重コロン付き）が導入されました。後方互換性のため、ブラウザーは以前に導入された `:first-letter` も受け付けます。
 >
 > オランダ語の `IJ` のような連字に対するブラウザーの対応は貧弱です。下記の互換性一覧表で、現在の対応状況を確認してください。
 
@@ -38,7 +35,11 @@ p::first-letter {
 
 ## 構文
 
-{{csssyntax}}
+```css
+::first-letter {
+  /* ... */
+}
+```
 
 ## 例
 
@@ -92,7 +93,7 @@ h2 + p::first-letter {
 
 #### HTML
 
-```html
+```html-nolint
 <p>
   Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie
   consequat.