diff --git a/test/keyboard-navigation.html b/test/keyboard-navigation.html
index 4983e5e6b..00d3fdd48 100644
--- a/test/keyboard-navigation.html
+++ b/test/keyboard-navigation.html
@@ -668,7 +668,7 @@
             });
 
             function findRowDetailsCell(scope) {
-              return scope.querySelector('.vaadin-grid-details-cell');
+              return scope.querySelector('[part~="details-cell"]');
             }
 
             it('should not navigate to row details with right arrow', function() {
diff --git a/vaadin-grid-keyboard-navigation-mixin.html b/vaadin-grid-keyboard-navigation-mixin.html
index d99df8ee5..88f83fce2 100644
--- a/vaadin-grid-keyboard-navigation-mixin.html
+++ b/vaadin-grid-keyboard-navigation-mixin.html
@@ -150,7 +150,7 @@
 
       const activeCell = e.composedPath()[0];
       const columnIndex = indexOfChildElement(activeCell);
-      const isRowDetails = activeCell.matches('.vaadin-grid-details-cell');
+      const isRowDetails = activeCell.matches('[part~="details-cell"]');
 
       const activeRow = activeCell.parentNode;
       // Body rows have index property, otherwise DOM child index of the row is used
@@ -240,7 +240,7 @@
       // Here we go!
       const dstCell = dstIsRowDetails ?
         Array.from(dstRow.children)
-          .filter(el => el.matches('.vaadin-grid-details-cell'))[0] :
+          .filter(el => el.matches('[part~="details-cell"]'))[0] :
         dstRow.children[dstColumnIndex];
       this._focusCell(dstCell, activeRowGroup);
     }