From 91b5de64dcc2bb6909ba12ae1f241142bda9d20f Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Tue, 4 Jan 2022 22:56:42 +0900 Subject: 2021/08/13 時点の英語版に同期 MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- files/ja/web/css/_colon_first-child/index.md | 166 ++++++++++++--------------- 1 file changed, 73 insertions(+), 93 deletions(-) (limited to 'files/ja/web') diff --git a/files/ja/web/css/_colon_first-child/index.md b/files/ja/web/css/_colon_first-child/index.md index e7f9680e4d..7bd4f5f10c 100644 --- a/files/ja/web/css/_colon_first-child/index.md +++ b/files/ja/web/css/_colon_first-child/index.md @@ -1,132 +1,112 @@ --- title: ':first-child' -slug: 'Web/CSS/:first-child' +slug: Web/CSS/:first-child tags: - CSS - - Layout - - Pseudo-class - - Reference - - Selector - - Web -translation_of: 'Web/CSS/:first-child' + - レイアウト + - 擬似クラス + - リファレンス + - セレクター + - ウェブ +browser-compat: css.selectors.first-child +translation_of: Web/CSS/:first-child --- -
{{CSSRef}}
+{{CSSRef}} -

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

+**`:first-child`** は [CSS](/ja/docs/Web/CSS) の[擬似クラス](/ja/docs/Web/CSS/Pseudo-classes)で、兄弟要素のグループの中で最初の要素を表します。 -
/* 兄弟要素の中で最初の <p> を
+```css
+/* 兄弟要素の中で最初の 
 を
    すべてを選択 */
 p:first-child {
   color: lime;
-}
+} +``` -
-

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

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

構文

+## 構文 {{csssyntax}} -

例

+## 例 -

基本的な例

+### 基本的な例 -

HTML

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

+  
This text is selected!

+  
This text isn't selected.

+

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

This text isn't selected: it's not a `p`.

+

This text isn't selected.

+
+``` -

CSS

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

結果

+#### 結果 -

{{EmbedLiveSample('Basic_example', 500, 200)}}

+{{EmbedLiveSample('Basic_example', 500, 200)}} -

リストのスタイル付け

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

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

CSS

+#### CSS -
ul li {
+```css
+ul li {
   color: blue;
 }
 
 ul li:first-child {
   color: red;
   font-weight: bold;
-}
- -

結果

- -

{{EmbedLiveSample('Styling_a_list')}}

- -

仕様書

- - - - - - - - - - - - - - - - - - - - - - - - - - -
仕様書状態備考
{{SpecName('CSS4 Selectors', '#first-child-pseudo', ':first-child')}}{{Spec2('CSS4 Selectors')}}選択する要素に親を必要としないようにした。
{{SpecName('CSS3 Selectors', '#first-child-pseudo', ':first-child')}}{{Spec2('CSS3 Selectors')}}変更なし。
{{SpecName('CSS2.1', 'selector.html#first-child', ':first-child')}}{{Spec2('CSS2.1')}}初回定義
- -

ブラウザーの互換性

- -

{{Compat("css.selectors.first-child")}}

- -

関連情報

+} +``` - +#### 結果 + +{{EmbedLiveSample('Styling_a_list')}} + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- {{CSSxRef(":-moz-first-node")}} {{Non-standard_Inline}} +- {{CSSxRef(":first-of-type")}} +- {{CSSxRef(":last-child")}} +- {{CSSxRef(":nth-child", ":nth-child()")}} -- cgit v1.2.3-54-g00ecf