From 950940f2187f8dd9877580d3e2625a952a1fabf6 Mon Sep 17 00:00:00 2001
From: Mark Woodard <mark.c.woodard@gmail.com>
Date: Wed, 27 Nov 2024 17:49:53 -0600
Subject: [PATCH] replacing some nth-child selectors with nth-of-type to handle
 things like <style> tags messing up the ordering

---
 .../blocks/class-kadence-blocks-table-block.php  | 16 ++++++++--------
 .../table/components/backend-styles/index.js     | 14 ++++++++------
 2 files changed, 16 insertions(+), 14 deletions(-)

diff --git a/includes/blocks/class-kadence-blocks-table-block.php b/includes/blocks/class-kadence-blocks-table-block.php
index a9195e167..fc7ea0fa0 100644
--- a/includes/blocks/class-kadence-blocks-table-block.php
+++ b/includes/blocks/class-kadence-blocks-table-block.php
@@ -99,8 +99,8 @@ public function build_css( $attributes, $css, $unique_id, $unique_style_id ) {
 					$has_fixed_columns = true;
 					$width_unit = ! empty( $settings['unit'] ) ? $settings['unit'] : '%';
 
-					$css->set_selector( '.kb-table' . esc_attr( $unique_id ) . ' td:nth-child(' . ( $index + 1 ) . '), ' .
-						'.kb-table' . esc_attr( $unique_id ) . ' th:nth-child(' . ( $index + 1 ) . ')' );
+					$css->set_selector( '.kb-table' . esc_attr( $unique_id ) . ' td:nth-of-type(' . ( $index + 1 ) . '), ' .
+						'.kb-table' . esc_attr( $unique_id ) . ' th:nth-of-type(' . ( $index + 1 ) . ')' );
 					$css->add_property( 'width', $settings['width'] . $width_unit );
 				}
 			}
@@ -130,16 +130,16 @@ public function build_css( $attributes, $css, $unique_id, $unique_style_id ) {
 
 
 		if ( !empty( $attributes['evenOddBackground'] ) ) {
-			$css->set_selector( '.kb-table-container .kb-table' . esc_attr( $unique_id ) . ' tr:nth-child(even)' );
+			$css->set_selector( '.kb-table-container .kb-table' . esc_attr( $unique_id ) . ' tr:nth-of-type(even)' );
 			$css->add_property( 'background-color', $css->render_color( $attributes['backgroundColorEven'] ?? 'undefined' ) );
 
-			$css->set_selector( '.kb-table-container .kb-table' . esc_attr( $unique_id ) . ' tr:nth-child(odd)' );
+			$css->set_selector( '.kb-table-container .kb-table' . esc_attr( $unique_id ) . ' tr:nth-of-type(odd)' );
 			$css->add_property( 'background-color', $css->render_color( $attributes['backgroundColorOdd'] ?? 'undefined' ) );
 
-			$css->set_selector( '.kb-table-container .kb-table' . esc_attr( $unique_id ) . ' tr:nth-child(odd):hover' );
+			$css->set_selector( '.kb-table-container .kb-table' . esc_attr( $unique_id ) . ' tr:nth-of-type(odd):hover' );
 			$css->add_property( 'background-color', $css->render_color( $attributes['backgroundHoverColorOdd'] ?? 'undefined' ) );
 
-			$css->set_selector( '.kb-table-container .kb-table' . esc_attr( $unique_id ) . ' tr:nth-child(even):hover' );
+			$css->set_selector( '.kb-table-container .kb-table' . esc_attr( $unique_id ) . ' tr:nth-of-type(even):hover' );
 			$css->add_property( 'background-color', $css->render_color( $attributes['backgroundHoverColorEven'] ?? 'undefined' ) );
 		} else {
 
@@ -157,7 +157,7 @@ public function build_css( $attributes, $css, $unique_id, $unique_style_id ) {
 		if( !empty( $attributes['columnBackgrounds'] ) ) {
 			foreach( $attributes['columnBackgrounds'] as $index => $background ) {
 				if ( $background ) {
-					$css->set_selector( '.kb-table-container .kb-table' . esc_attr( $unique_id ) . ' td:nth-child(' . ( $index + 1 ) . ')' );
+					$css->set_selector( '.kb-table-container .kb-table' . $unique_id . ' td:nth-of-type(' . ( $index + 1 ) . ')' );
 					$css->add_property( 'background-color', $css->render_color( $background ) );
 				}
 			}
@@ -167,7 +167,7 @@ public function build_css( $attributes, $css, $unique_id, $unique_style_id ) {
 		if( !empty( $attributes['columnBackgroundsHover'] ) ) {
 			foreach( $attributes['columnBackgroundsHover'] as $index => $background ) {
 				if ( $background ) {
-					$css->set_selector( '.kb-table-container .kb-table' . esc_attr( $unique_id ) . ' td:nth-child(' . ( $index + 1 ) . '):hover' );
+					$css->set_selector( '.kb-table-container .kb-table' . esc_attr( $unique_id ) . ' td:nth-of-type(' . ( $index + 1 ) . '):hover' );
 					$css->add_property( 'background-color', $css->render_color( $background ) );
 				}
 			}
diff --git a/src/blocks/table/components/backend-styles/index.js b/src/blocks/table/components/backend-styles/index.js
index f7a3c21bc..b8d2373c3 100644
--- a/src/blocks/table/components/backend-styles/index.js
+++ b/src/blocks/table/components/backend-styles/index.js
@@ -160,16 +160,16 @@ export default function BackendStyles(props) {
 	);
 
 	if (evenOddBackground) {
-		css.set_selector(`.kb-table${uniqueID} tr:nth-child(even)`);
+		css.set_selector(`.kb-table${uniqueID} tr:nth-of-type(even)`);
 		css.add_property('background-color', KadenceColorOutput(backgroundColorEven));
 
-		css.set_selector(`.kb-table${uniqueID} tr:nth-child(odd)`);
+		css.set_selector(`.kb-table${uniqueID} tr:nth-of-type(odd)`);
 		css.add_property('background-color', KadenceColorOutput(backgroundColorOdd));
 
-		css.set_selector(`.kb-table${uniqueID} tr:nth-child(odd):hover`);
+		css.set_selector(`.kb-table${uniqueID} tr:nth-of-type(odd):hover`);
 		css.add_property('background-color', KadenceColorOutput(backgroundHoverColorOdd));
 
-		css.set_selector(`.kb-table${uniqueID} tr:nth-child(even):hover`);
+		css.set_selector(`.kb-table${uniqueID} tr:nth-of-type(even):hover`);
 		css.add_property('background-color', KadenceColorOutput(backgroundHoverColorEven));
 	} else {
 		css.set_selector(`.kb-table${uniqueID} tr`);
@@ -183,7 +183,9 @@ export default function BackendStyles(props) {
 		columnBackgrounds.forEach((background, index) => {
 			if (background) {
 				css.set_selector(
-					`.kb-table${uniqueID} td:nth-child(${index + 1}), .kb-table${uniqueID} th:nth-child(${index + 1})`
+					`.kb-table${uniqueID} td:nth-of-type(${index + 1}), .kb-table${uniqueID} th:nth-of-type(${
+						index + 1
+					})`
 				);
 				css.add_property('background-color', KadenceColorOutput(background));
 			}
@@ -194,7 +196,7 @@ export default function BackendStyles(props) {
 		columnBackgroundsHover.forEach((background, index) => {
 			if (background) {
 				css.set_selector(
-					`.kb-table${uniqueID} td:nth-child(${index + 1}):hover, .kb-table${uniqueID} th:nth-child(${
+					`.kb-table${uniqueID} td:nth-of-type(${index + 1}):hover, .kb-table${uniqueID} th:nth-of-type(${
 						index + 1
 					}):hover`
 				);