From 006a2a2049925581b699044976664f287bf77768 Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Thu, 6 Jan 2022 09:50:03 +0900 Subject: 2021/08/13 時点の英語版に同期 MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../web/css/adjacent_sibling_combinator/index.md | 102 +++++++++------------ 1 file changed, 41 insertions(+), 61 deletions(-) (limited to 'files/ja') diff --git a/files/ja/web/css/adjacent_sibling_combinator/index.md b/files/ja/web/css/adjacent_sibling_combinator/index.md index 003333d6df..62413a4ee1 100644 --- a/files/ja/web/css/adjacent_sibling_combinator/index.md +++ b/files/ja/web/css/adjacent_sibling_combinator/index.md @@ -3,81 +3,61 @@ title: 隣接兄弟結合子 slug: Web/CSS/Adjacent_sibling_combinator tags: - CSS - - Reference - - Selectors + - NeedsMobileBrowserCompatibility + - リファレンス - セレクター +browser-compat: css.selectors.adjacent_sibling translation_of: Web/CSS/Adjacent_sibling_combinator --- -
{{CSSRef("Selectors")}}
+{{CSSRef("Selectors")}} -

隣接兄弟結合子 (adjacent sibling combinator) (+) は2つのセレクターを接続し、同じ親{{DOMxRef("element", "要素")}}の子同士であって、1つ目の要素の直後にある2つ目の要素を選択します。

+**隣接兄弟結合子** (adjacent sibling combinator, `+`) は 2 つのセレクターを接続し、 2 つ目の要素が 1 つ目の要素の _直後_ にあって、両者が同じ親{{DOMxRef("element", "要素")}}の子同士である場合に一致します。 -
/* 画像の直後に来る段落 */
+```css
+/* 画像の直後に来る段落 */
 img + p {
   font-style: bold;
-}
+} +``` -

構文

+## 構文 -
直前の要素 + 対象の要素 { スタイルプロパティ }
-
+```css +直前の要素 + 対象の要素 { スタイルプロパティ } +``` -

+## 例 -

CSS

+### CSS -
li:first-of-type + li {
+```css
+li:first-of-type + li {
   color: red;
 }
-
- -

HTML

- -
<ul>
-  <li>One</li>
-  <li>Two!</li>
-  <li>Three</li>
-</ul>
- -

Result

- -

{{EmbedLiveSample("Example", "100%", 100)}}

- -

仕様書

- - - - - - - - - - - - - - - - - - - - - - - - - - -
仕様書状態備考
{{SpecName("CSS4 Selectors", "#adjacent-sibling-combinators", "next-sibling combinator")}}{{Spec2("CSS4 Selectors")}}名前を「次の兄弟」結合子に変更。
{{SpecName("CSS3 Selectors", "#adjacent-sibling-combinators", "Adjacent sibling combinator")}}{{Spec2("CSS3 Selectors")}} 
{{SpecName("CSS2.1", "selector.html#adjacent-selectors", "Adjacent sibling selectors")}}{{Spec2("CSS2.1")}}初回定義
- -

ブラウザーの対応

- -

{{Compat("css.selectors.adjacent_sibling")}}

- -

関連情報

+``` + +### HTML +```html +``` + +### 結果 + +{{EmbedLiveSample("Examples", "100%", 100)}} + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- [一般兄弟結合子](/ja/docs/Web/CSS/General_sibling_combinator) -- cgit v1.2.3-54-g00ecf