From 003dab6dcfaaca3765ff04545b0084f283f78a63 Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Thu, 6 Jan 2022 09:45:58 +0900 Subject: 2021/08/13 時点の英語版に同期 MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../ja/web/css/general_sibling_combinator/index.md | 115 +++++++++------------ 1 file changed, 50 insertions(+), 65 deletions(-) diff --git a/files/ja/web/css/general_sibling_combinator/index.md b/files/ja/web/css/general_sibling_combinator/index.md index 22b97dc75c..ed12db420a 100644 --- a/files/ja/web/css/general_sibling_combinator/index.md +++ b/files/ja/web/css/general_sibling_combinator/index.md @@ -3,82 +3,67 @@ title: 一般兄弟結合子 slug: Web/CSS/General_sibling_combinator tags: - CSS - - Reference - - Selectors + - リファレンス - セレクター +browser-compat: css.selectors.general_sibling translation_of: Web/CSS/General_sibling_combinator --- -
{{CSSRef("Selectors")}}
+{{CSSRef("Selectors")}} -

一般兄弟結合子 (general sibling combinator, ~) は2個のセレクターを結びつけます。右側のセレクタで選択される要素のうち、次の条件をともにみたすものを選択します。

+**一般兄弟結合子** (general sibling combinator, `~`) は 2 個のセレクターを結びつけ、 1 つ目の要素の後に 2 つ目の要素のがあり（直後である必要はない）、かつ両者が同じ親{{Glossary("element", "要素")}}の子であるすべてのパターンに一致します。 -

まず、右側のセレクタで選択される要素が、左側のセレクタで選択される要素より後に現れることです。（直後である必要はありません）

- -

もうひとつは、これらの要素が同じ親要素（{{Glossary("element", "要素")}}）をもつことです。

- -
/* 任意の画像の兄弟で、
+```css
+/* 任意の画像の兄弟で、
    その画像より後方にある段落 */
 img ~ p {
   color: red;
-}
+} +``` -

構文

+## 構文 -
先行する要素 ~ 選択される要素 { スタイルプロパティ }
-
+```css +先行する要素 ~ 選択される要素 { スタイルプロパティ } +``` -

例

+## 例 -

CSS

+### CSS -
p ~ span {
+```css
+p ~ span {
   color: red;
-}
- -

HTML

- -
<span>This is not red.</span>
-<p>Here is a paragraph.</p>
-<code>Here is some code.</code>
-<span>And here is a red span!</span>
-<code>More code...</code>
-<span>And this is a red span!</span>
-
- -

結果

- -

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

- -

仕様書

- - - - - - - - - - - - - - - - - - - - - -
仕様書状態備考
{{SpecName("CSS4 Selectors", "#general-sibling-combinators", "subsequent-sibling combinator")}}{{Spec2("CSS4 Selectors")}}名前を"subsequent-sibling combinator"に変更。
{{SpecName("CSS3 Selectors", "#general-sibling-combinators", "general sibling combinator")}}{{Spec2("CSS3 Selectors")}}初回定義
- -

ブラウザーの対応

- -

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

- -

関連情報

- - +} +``` + +### HTML + +```html +This is not red. +

Here is a paragraph.

+Here is some code. +And here is a red span! +And this is a red span! +More code... +
How are you?
+

Whatever it may be, keep smiling.

+

Dream big

+

that's all.

+And yet again this is a red span! +``` + +### 結果 + +{{EmbedLiveSample("Examples", "auto", 300)}} + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- [隣接兄弟結合子](/ja/docs/Web/CSS/Adjacent_sibling_combinator) -- cgit v1.2.3-54-g00ecf