diff --git a/CHANGELOG.md b/CHANGELOG.md
index d1481dd850..ae228a3b0a 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -2,6 +2,7 @@
## Unreleased
+* Fix specificity of certain styles involving a child selector ([#4795](https://github.com/sveltejs/svelte/issues/4795))
* Fix scoping of styles involving child selector and `*` ([#5370](https://github.com/sveltejs/svelte/issues/5370))
## 3.25.0
diff --git a/src/compiler/compile/css/Selector.ts b/src/compiler/compile/css/Selector.ts
index e3e1fa96bb..d18a7e7ba6 100644
--- a/src/compiler/compile/css/Selector.ts
+++ b/src/compiler/compile/css/Selector.ts
@@ -65,9 +65,8 @@ export default class Selector {
transform(code: MagicString, attr: string, max_amount_class_specificity_increased: number) {
const amount_class_specificity_to_increase = max_amount_class_specificity_increased - this.blocks.filter(block => block.should_encapsulate).length;
- attr = attr.repeat(amount_class_specificity_to_increase + 1);
- function encapsulate_block(block: Block) {
+ function encapsulate_block(block: Block, attr: string) {
let i = block.selectors.length;
while (i--) {
@@ -89,15 +88,14 @@ export default class Selector {
}
}
- this.blocks.forEach((block) => {
+ this.blocks.forEach((block, index) => {
if (block.global) {
const selector = block.selectors[0];
const first = selector.children[0];
const last = selector.children[selector.children.length - 1];
code.remove(selector.start, first.start).remove(last.end, selector.end);
}
-
- if (block.should_encapsulate) encapsulate_block(block);
+ if (block.should_encapsulate) encapsulate_block(block, index === this.blocks.length - 1 ? attr.repeat(amount_class_specificity_to_increase + 1) : attr);
});
}
diff --git a/test/css/samples/child-combinator/expected.css b/test/css/samples/child-combinator/expected.css
new file mode 100644
index 0000000000..5d50ae16d7
--- /dev/null
+++ b/test/css/samples/child-combinator/expected.css
@@ -0,0 +1 @@
+main.svelte-xyz button.svelte-xyz.svelte-xyz{background-color:red}main.svelte-xyz div.svelte-xyz>button.svelte-xyz{background-color:blue}
\ No newline at end of file
diff --git a/test/css/samples/child-combinator/input.svelte b/test/css/samples/child-combinator/input.svelte
new file mode 100644
index 0000000000..9d5d8d27e0
--- /dev/null
+++ b/test/css/samples/child-combinator/input.svelte
@@ -0,0 +1,14 @@
+
+
+
+
+
+
\ No newline at end of file