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` );