From b451531382a80301315e2e0969583225b74e1009 Mon Sep 17 00:00:00 2001 From: Dipika Bhattacharya Date: Wed, 13 Sep 2023 12:34:07 -0400 Subject: [PATCH 1/5] clarifies text and adds examples --- .../css/general_sibling_combinator/index.md | 66 ++++++++++++++----- 1 file changed, 50 insertions(+), 16 deletions(-) diff --git a/files/en-us/web/css/general_sibling_combinator/index.md b/files/en-us/web/css/general_sibling_combinator/index.md index d07bf8b5cad9ef1..1aefce87804eebd 100644 --- a/files/en-us/web/css/general_sibling_combinator/index.md +++ b/files/en-us/web/css/general_sibling_combinator/index.md @@ -7,11 +7,11 @@ browser-compat: css.selectors.general_sibling {{CSSRef("Selectors")}} -The **general sibling combinator** (`~`) separates two selectors and matches _all iterations_ of the second element, that are following the first element (though not necessarily immediately), and are children of the same parent {{Glossary("element")}}. +The **general sibling combinator** (`~`) separates two selectors and matches _all instances_ of the second element that follow the first element (not necessarily immediately) and share the same parent element. + +In the following example, the general sibling combinator (`~`) helps to select and style paragraphs that are both siblings of an image and appear after any image. ```css -/* Paragraphs that are siblings of and - subsequent to any image */ img ~ p { color: red; } @@ -21,20 +21,14 @@ img ~ p { ```css-nolint /* The white space around the ~ combinator is optional but recommended. */ -former_element ~ target_element { style properties } +compound_selector1 ~ compound_selector2 { style properties } ``` ## Examples -### CSS - -```css -p ~ span { - color: red; -} -``` +### Using the combinator with simple selectors -### HTML +This example shows the use of the `~` combinator when both the selectors are simple (`p` and `span`). ```html
@@ -43,7 +37,7 @@ p ~ span { Here is some code. This span is red because it appears after the paragraph, even though there - are other nodes in between + are other nodes in between.

Whatever it may be, keep smiling.

Dream big

@@ -53,13 +47,52 @@ p ~ span {
- This span is not red because it doesn't share a parent with a paragraph + This span is not red because it doesn't share a parent with a paragraph. ``` -### Result +```css +p ~ span { + color: red; +} +``` + +{{EmbedLiveSample("Using the combinator with simple selectors", "auto", 300)}} + +### Using the combinator with compound selectors + +Elements represented by the two compound selectors share the same parent in the document tree. The element represented by the first compound selector precedes (not necessarily immediately) the element represented by the second one. + +The example below shows that the second compound selector must match the parent of the first compound selector. + +```html +

Dream big

+And yet again this is a red span! +
+

Here is another paragraph.

+ A blue span +
+ A green span +
+
+``` + +```css +.foo p ~ span { + color: blue; +} + +.foo p ~ .foo span { + color: green; +} +``` + +{{EmbedLiveSample("Using the combinator with compound selectors", "auto", 200)}} + +In the above HTML, the two siblings of `.foo p` are `span` and `.foo span`. -{{EmbedLiveSample("Examples", "auto", 300)}} +- When the second compound selector is `span`, it selects the `span` element that is a sibling of `p` and both are descendants of `.foo`. +- When the second compound selector is `.foo span`, it selects the `span` element that's a descendant of `.foo` if that `.foo` is a sibling of `p`; essentially, both are nested in an ancestor of `.foo`. ## Specifications @@ -72,3 +105,4 @@ p ~ span { ## See also - [Adjacent sibling combinator](/en-US/docs/Web/CSS/Adjacent_sibling_combinator) +- From 4235d7fe3e84cfc19e3895f15819c6134725aab9 Mon Sep 17 00:00:00 2001 From: Dipika Bhattacharya Date: Tue, 19 Sep 2023 14:59:24 -0400 Subject: [PATCH 2/5] fixes review comments --- .../web/css/general_sibling_combinator/index.md | 17 ++++++++--------- 1 file changed, 8 insertions(+), 9 deletions(-) diff --git a/files/en-us/web/css/general_sibling_combinator/index.md b/files/en-us/web/css/general_sibling_combinator/index.md index 1aefce87804eebd..5b796eed427c3f5 100644 --- a/files/en-us/web/css/general_sibling_combinator/index.md +++ b/files/en-us/web/css/general_sibling_combinator/index.md @@ -21,14 +21,14 @@ img ~ p { ```css-nolint /* The white space around the ~ combinator is optional but recommended. */ -compound_selector1 ~ compound_selector2 { style properties } +former_element ~ target_element { style properties } ``` ## Examples ### Using the combinator with simple selectors -This example shows the use of the `~` combinator when both the selectors are simple (`p` and `span`). +This example shows the use of the `~` combinator when both the selectors are simple selectors (`p` and `span`). ```html
@@ -59,11 +59,11 @@ p ~ span { {{EmbedLiveSample("Using the combinator with simple selectors", "auto", 300)}} -### Using the combinator with compound selectors +### Using the combinator with complex selectors -Elements represented by the two compound selectors share the same parent in the document tree. The element represented by the first compound selector precedes (not necessarily immediately) the element represented by the second one. +In this example, elements represented by the two complex selectors share the same parent in the document tree. The element represented by the first complex selector precedes (not necessarily immediately) the element represented by the target selector. -The example below shows that the second compound selector must match the parent of the first compound selector. +The example below shows that the target complex selector must share the same parent of the first complex selector. ```html

Dream big

@@ -87,12 +87,12 @@ The example below shows that the second compound selector must match the parent } ``` -{{EmbedLiveSample("Using the combinator with compound selectors", "auto", 200)}} +{{EmbedLiveSample("Using the combinator with complex selectors", "auto", 200)}} In the above HTML, the two siblings of `.foo p` are `span` and `.foo span`. -- When the second compound selector is `span`, it selects the `span` element that is a sibling of `p` and both are descendants of `.foo`. -- When the second compound selector is `.foo span`, it selects the `span` element that's a descendant of `.foo` if that `.foo` is a sibling of `p`; essentially, both are nested in an ancestor of `.foo`. +- When the target selector is `span`, the `span` element that is a sibling of `p` is selected. The `p` element is a descendant of `.foo`, so are its `span` siblings. +- In `.foo p ~ .foo span`, the target selector is `span` that is a descendant of `.foo`. In this case, the `span` element that's a descendent of `.foo` is selected if that `.foo` is a sibling of `p`; essentially, both are nested in an ancestor of `.foo`. ## Specifications @@ -105,4 +105,3 @@ In the above HTML, the two siblings of `.foo p` are `span` and `.foo span`. ## See also - [Adjacent sibling combinator](/en-US/docs/Web/CSS/Adjacent_sibling_combinator) -- From 05a1727a5f8c8fcc4d491aeba08204ee1f6a380e Mon Sep 17 00:00:00 2001 From: Dipika Bhattacharya Date: Tue, 19 Sep 2023 15:06:50 -0400 Subject: [PATCH 3/5] adds link to complex selectors --- files/en-us/web/css/general_sibling_combinator/index.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/files/en-us/web/css/general_sibling_combinator/index.md b/files/en-us/web/css/general_sibling_combinator/index.md index 5b796eed427c3f5..fa899f9ca959d21 100644 --- a/files/en-us/web/css/general_sibling_combinator/index.md +++ b/files/en-us/web/css/general_sibling_combinator/index.md @@ -61,7 +61,7 @@ p ~ span { ### Using the combinator with complex selectors -In this example, elements represented by the two complex selectors share the same parent in the document tree. The element represented by the first complex selector precedes (not necessarily immediately) the element represented by the target selector. +In this example, elements represented by the two [complex selectors](/en-US/docs/Web/CSS/CSS_selectors/Selector_structure#complex_selector) share the same parent in the document tree. The element represented by the first complex selector precedes (not necessarily immediately) the element represented by the target selector. The example below shows that the target complex selector must share the same parent of the first complex selector. From 05bd9c22f2405b326686685867ea8e58c2324a55 Mon Sep 17 00:00:00 2001 From: Dipika Bhattacharya Date: Fri, 22 Sep 2023 12:05:32 -0400 Subject: [PATCH 4/5] fixes review comments --- files/en-us/web/css/general_sibling_combinator/index.md | 9 ++++++--- 1 file changed, 6 insertions(+), 3 deletions(-) diff --git a/files/en-us/web/css/general_sibling_combinator/index.md b/files/en-us/web/css/general_sibling_combinator/index.md index fa899f9ca959d21..9ff2d2da426adf8 100644 --- a/files/en-us/web/css/general_sibling_combinator/index.md +++ b/files/en-us/web/css/general_sibling_combinator/index.md @@ -61,9 +61,12 @@ p ~ span { ### Using the combinator with complex selectors -In this example, elements represented by the two [complex selectors](/en-US/docs/Web/CSS/CSS_selectors/Selector_structure#complex_selector) share the same parent in the document tree. The element represented by the first complex selector precedes (not necessarily immediately) the element represented by the target selector. +This example contains two [complex selectors](/en-US/docs/Web/CSS/CSS_selectors/Selector_structure#complex_selector), both using the general sibling combinator: `.foo p ~ span` and `.foo p ~ .foo span`. -The example below shows that the target complex selector must share the same parent of the first complex selector. +- The first complex selector, `.foo p ~ span`, matches all spans that come after a paragraph _if_ the span and paragraph share the same parent **and** that parent or an ancestor of that parent has the class `.foo`. +- The second complex selector, `.foo p ~ .foo span`, matches all spans that are a descendant of the element with class `.foo` _if_ that element is a sibling of the previously mentioned paragraph. + +The example below shows that the target element in the complex selector must share the same parent as the initial element in the complex selector. ```html

Dream big

@@ -89,7 +92,7 @@ The example below shows that the target complex selector must share the same par {{EmbedLiveSample("Using the combinator with complex selectors", "auto", 200)}} -In the above HTML, the two siblings of `.foo p` are `span` and `.foo span`. +In the above HTML, the two siblings of `.foo p` are `span` and `.foo`. The green `span` is a descendant of `.foo`, which is a sibling of `.foo p`. - When the target selector is `span`, the `span` element that is a sibling of `p` is selected. The `p` element is a descendant of `.foo`, so are its `span` siblings. - In `.foo p ~ .foo span`, the target selector is `span` that is a descendant of `.foo`. In this case, the `span` element that's a descendent of `.foo` is selected if that `.foo` is a sibling of `p`; essentially, both are nested in an ancestor of `.foo`. From a0d1649261601971951a07efd579b0e2fa52b9fe Mon Sep 17 00:00:00 2001 From: Dipika Bhattacharya Date: Mon, 25 Sep 2023 21:16:37 -0400 Subject: [PATCH 5/5] fixes example text --- files/en-us/web/css/general_sibling_combinator/index.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/files/en-us/web/css/general_sibling_combinator/index.md b/files/en-us/web/css/general_sibling_combinator/index.md index 9ff2d2da426adf8..068cdf8d557fddc 100644 --- a/files/en-us/web/css/general_sibling_combinator/index.md +++ b/files/en-us/web/css/general_sibling_combinator/index.md @@ -92,7 +92,7 @@ The example below shows that the target element in the complex selector must sha {{EmbedLiveSample("Using the combinator with complex selectors", "auto", 200)}} -In the above HTML, the two siblings of `.foo p` are `span` and `.foo`. The green `span` is a descendant of `.foo`, which is a sibling of `.foo p`. +In the above HTML, the two siblings of `.foo p` are `span` and `.foo`. The green `span` is a descendant of the `.foo` class, which is a sibling of `p`. - When the target selector is `span`, the `span` element that is a sibling of `p` is selected. The `p` element is a descendant of `.foo`, so are its `span` siblings. - In `.foo p ~ .foo span`, the target selector is `span` that is a descendant of `.foo`. In this case, the `span` element that's a descendent of `.foo` is selected if that `.foo` is a sibling of `p`; essentially, both are nested in an ancestor of `.foo`.