diff --git a/lib/class-wp-theme-json-gutenberg.php b/lib/class-wp-theme-json-gutenberg.php
index 58d29c14e7c02..cdf6b472f9f11 100644
--- a/lib/class-wp-theme-json-gutenberg.php
+++ b/lib/class-wp-theme-json-gutenberg.php
@@ -1020,8 +1020,8 @@ protected static function get_blocks_metadata() {
 					foreach ( $registered_styles[ $block_name ] as $block_style ) {
 						if ( ! isset( $style_selectors[ $block_style['name'] ] ) ) {
 							$style_selectors[ $block_style['name'] ] = static::append_to_selector(
-								'.is-style-' . $block_style['name'],
-								$block_metadata['selector']
+								$block_metadata['selector'],
+								'.is-style-' . $block_style['name']
 							);
 						}
 					}
@@ -1065,14 +1065,14 @@ protected static function get_blocks_metadata() {
 			$style_selectors = array();
 			if ( ! empty( $block_type->styles ) ) {
 				foreach ( $block_type->styles as $style ) {
-					$style_selectors[ $style['name'] ] = static::append_to_selector( '.is-style-' . $style['name'], static::$blocks_metadata[ $block_name ]['selector'] );
+					$style_selectors[ $style['name'] ] = static::append_to_selector( static::$blocks_metadata[ $block_name ]['selector'], '.is-style-' . $style['name'] );
 				}
 			}
 
 			// Block style variations can be registered through the WP_Block_Styles_Registry as well as block.json.
 			$registered_styles = $style_registry->get_registered_styles_for_block( $block_name );
 			foreach ( $registered_styles as $style ) {
-				$style_selectors[ $style['name'] ] = static::append_to_selector( '.is-style-' . $style['name'], static::$blocks_metadata[ $block_name ]['selector'] );
+				$style_selectors[ $style['name'] ] = static::append_to_selector( static::$blocks_metadata[ $block_name ]['selector'], '.is-style-' . $style['name'] );
 			}
 
 			if ( ! empty( $style_selectors ) ) {
diff --git a/packages/block-editor/src/components/global-styles/use-global-styles-output.js b/packages/block-editor/src/components/global-styles/use-global-styles-output.js
index b1f6f395d9861..99f2cd8801d84 100644
--- a/packages/block-editor/src/components/global-styles/use-global-styles-output.js
+++ b/packages/block-editor/src/components/global-styles/use-global-styles-output.js
@@ -1164,7 +1164,7 @@ export const getBlockSelectors = ( blockTypes, getBlockStyles ) => {
 		const styleVariationSelectors = {};
 
 		blockStyleVariations?.forEach( ( variation ) => {
-			const styleVariationSelector = `.is-style-${ variation.name }${ selector }`;
+			const styleVariationSelector = `${ selector }.is-style-${ variation.name }`;
 			styleVariationSelectors[ variation.name ] = styleVariationSelector;
 		} );